How to Add Elements in jQuery

By | September 30, 2022
0 Comment

jQuery provides various methods to add new DOM elements in the existing HTML document. You can add these new elements at various locations (before, after any of the existing tags) based on your requirements.

jQuery append() Method

The jQuery append() method adds the content at the end of the matched each element(s). You can also append multiple elements in a single function call.

Following is the syntax of the append() method:

$(selector).append(content, [content]);

Here content parameter could be a HTML string, a DOM element, text node, array of elements and text nodes or jQuery object to insert at the end of each element in the set of matched elements.

Synopsis

Consider the following HTML content:

<div class="container">
   <h2>jQuery append() Method</h2>
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

Now if we apply the append() method as follows:

$( ".inner" ).append( "<p>Zara</p>" );

It will produce following result:

<div class="container">
   <h2>jQuery append() Method</h2>
   <div class="inner">Hello
   <p>Zara</p>
   </div>
   <div class="inner">Goodbye
   <p>Zara</p>
   </div>
</div>

Example

Let’s try the following example and verify the result:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $(".inner").append("<p>Zara</p>");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery append() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

jQuery appendTo() Method

The jQuery appendTo() method performs the same task as done by appendTo(). The major difference is in the syntax-specifically, in the placement of the content and target.

Following is the syntax of the appendTo() method:

$(content).appendTo(selector);

Here content parameter could be a HTML string, a DOM element, text node, array of elements and text nodes or jQuery object to insert at the end of each element in the set of matched elements.

Example

Let’s try the following example and verify the result:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("<p>Zara</p>").appendTo(".inner");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery appendTo() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

jQuery after() Method

The jQuery after() method adds the content after the matched each element(s). You can also insert multiple elements in a single function call.

Following is the syntax of the after() method:

$(selector).after(content, [content]);

Here content parameter could be a HTML string, a DOM element, text node, array of elements and text nodes or jQuery object to insert at the end of each element in the set of matched elements.

Synopsis

Consider the following HTML content:

<div class="container">
   <h2>jQuery after() Method</h2>
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

Now if we apply the after() method as follows:

$( ".inner" ).after( "<p>Zara</p>" );

It will produce following result:

<div class="container">
   <h2>jQuery after() Method</h2>
   <div class="inner">Hello</div>
   <p>Zara</p>
   <div class="inner">Goodbye</div>
   <p>Zara</p>
</div>

Example

Let’s try the following example and verify the result:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $(".inner").after("<p>Zara</p>");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery after() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

jQuery insertAfter() Method

The jQuery insertAfter() method adds the content after the matched each element(s). The after() and insertAfter() methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target.

Following is the syntax of the after() method:

$(content).insertAfter(selector);

Here content parameter could be a HTML string, a DOM element, text node, array of elements and text nodes or jQuery object to insert at the end of each element in the set of matched elements.

Example

Let’s try the following example and verify the result:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("<p>Zara</p>").insertAfter(".inner");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery insertAfter() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

jQuery prepend() Method

The jQuery prepend() method adds the content at the beginning of the matched each element(s). You can also prepend multiple elements in a single function call.

Following is the syntax of the append() method:

$(selector).prepend(content, [content]);

Here content parameter could be a HTML string, a DOM element, text node, array of elements and text nodes or jQuery object to insert at the end of each element in the set of matched elements.

Synopsis

Consider the following HTML content:

<div class="container">
   <h2>jQuery prepend() Method</h2>
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

Now if we apply the prepend() method as follows:

$( ".inner" ).prepend( "<p>Zara</p>" );

It will produce following result:

<div class="container">
   <h2>jQuery prepend() Method</h2>
   <div class="inner">
   <p>Zara</p>
   Hello
   </div>
   <div class="inner">
   <p>Zara</p>
   Goodbye
   </div>
</div>

Example

Let’s try the following example and verify the result:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $(".inner").prepend("<p>Zara</p>");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery prepend() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

jQuery prependTo() Method

The jQuery prependTo() method perform the same task as done by prepend(). The major difference is in the syntax-specifically, in the placement of the content and target.

Following is the syntax of the prependTo() method:

$(content).prependTo(selector);

Here content parameter could be a HTML string, a DOM element, text node, array of elements and text nodes or jQuery object to insert at the end of each element in the set of matched elements.

Example

Let’s try the following example and verify the result:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("<p>Zara</p>").prependTo(".inner");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery prependTo() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

jQuery before() Method

The jQuery before() method adds the content before the matched each element(s). You can also insert multiple elements in a single function call.

Following is the syntax of the before() method:

$(selector).before(content, [content]);

Here content parameter could be a HTML string, a DOM element, text node, array of elements and text nodes or jQuery object to insert at the end of each element in the set of matched elements.

Synopsis

Consider the following HTML content:

<div class="container">
   <h2>jQuery before() Method</h2>
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

Now if we apply the before() method as follows:

$( ".inner" ).before( "<p>Zara</p>" );

It will produce following result:

<div class="container">
   <h2>jQuery before() Method</h2>
   <p>Zara</p>
   <div class="inner">Hello</div>
   <p>Zara</p>
   <div class="inner">Goodbye</div>
</div>

Example

Let’s try the following example and verify the result:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $(".inner").before("<p>Zara</p>");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery before() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

jQuery insertBefore() Method

The jQuery insertBefore() method adds the content before the matched each element(s). The before() and insertBefore() methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target.

Following is the syntax of the after() method:

$(content).insertBefore(selector);

Here content parameter could be a HTML string, a DOM element, text node, array of elements and text nodes or jQuery object to insert at the end of each element in the set of matched elements.

Example

Let’s try the following example and verify the result:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("<p>Zara</p>").insertBefore(".inner");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery insertBefore() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *