jQuery Add

jQuery has various kind of method that are used to add new content in HTML documnet. These methods are append(), prepend(), after(), before().

The jQuery append() method is used to insert content to the end of the selected elements.

Example of Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".example-jquery-append-button").click(function(){
    $(".example-jquery-append-paragraph").append("This is also paragraph ");
  });
});
</script>
<p class="example-jquery-append-paragraph">This is a paragraph.</p>
<button class="example-jquery-append-button">click here to append text</button>

Output

The prepend() method is used to insert content to the beginning of the selected elements.

Example of Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".example-jquery-prepend-button").click(function(){
    $(".example-jquery-prepend-paragraph").prepend("This is also paragraph ");
  });
});
</script>
<p class="example-jquery-prepend-paragraph">This is a paragraph.</p>
<button class="example-jquery-prepend-button">click here to append text</button>

Output

The jQuery before() method is used to insert content before the selected elements.

Example of Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".example-jquery-before-button").click(function(){
    $(".example-jquery-before-paragraph").before("This is also paragraph ");
  });
});
</script>
<p class="example-jquery-before-paragraph">This is a paragraph.</p>
<button class="example-jquery-before-button">click here to append text</button>

Output

The jQuery after() method is used to insert content after the selected elements.

Example of Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".example-jquery-after-button").click(function(){
    $(".example-jquery-after-paragraph").after("This is also paragraph ");
  });
});
</script>
<p class="example-jquery-after-paragraph">This is a paragraph.</p>
<button class="example-jquery-after-button">click here to append text</button>

Output