jQuery Append and Prepend Elements

jQuery Append and Prepend Elements with Examples

In this article, I am going to discuss jQuery Append and Prepend Elements with Examples. Please read our previous article, where we discussed jQuery Wrap and UnWrap Elements. At the end of this article, you will understand everything about jQuery Append and Prepend Elements.

jQuery Append and Prepend Elements

If you have to insert a specified content at the end of any selected element(s), then jQuery provides you a built-in method append(). Similarly, if you have to insert a specified content at the starting of any selected element(s), then jQuery provides you a built-in method prepend().

To append elements, jQuery provides

append()
appendTo()

To prepend elements, jQuery provides

prepend()
prependTo()

As these methods modify DOM elements, so they belong to the DOM manipulation category.

jQuery append() Method

Syntax: $(selector).append(content, function(index, html))
Parameters:
Content: This is a required parameter. This specifies the content to insert (can contain HTML tags)
Function: This is an optional callback function. It takes two optional parameters.

Index – returns the index position of the element in the set
HTML – Returns the current HTML of the selected element

Example: jQuery append method

Let us understand the jQuery append method with examples. In the below example, we have a div element and inside that, we have some content. By append() method, we are inserting a <h4> element at the end of the <div>

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Append & Prepend Elements</title>
</head>
<body>
    <h3>jQuery Append Element</h3>
    <section>
      <div class="div1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, enim
        veritatis ab fugiat ducimus, totam ratione quod
      </div>
    </section>
    </br>
    <button class="demo append">Append</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $(".append").click(function () {
          $("div").append("<h4>This is some content</h4>");
        });
      });
    </script>
</body>
</html>

Now run the above code and you will see the following output in the browser.

Now click on the Append button. As soon as you click on the Append button, it will insert an <h4> element at the end of the <div> and you will see the same as shown in the below image.

You can verify the same in the browser developer tool. So, open the browser developer tool by pressing the F12 key and have a look at the Elements tab and you can see the h4 element which is inserted by the jQuery Append method as shown in the below image.

Another Example For Better Understanding:

We can also append an existing element of the DOM to any specified element. If the content is an existing element, it will be moved from its current position, and inserted at the end of the selected elements. For better understanding please have a look at the below example.

In the below example, notice that the <h4> element is present in our DOM. When we clicked on the Append button the <h4> element appended to the <div> element. Notice that inside the append() method we have used a jQuery selector as a parameter.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Append & Prepend Elements</title>
</head>
<body>
    <h3>jQuery Append Element</h3>
    <h4>This is some content</h4>
    <section>
      <div class="div1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, enim
        veritatis ab fugiat ducimus, totam ratione quod
      </div>
    </section>
    </br>
    <button class="demo append">Append</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $(".append").click(function () {
          $("div").append($("h4"));
        });
      });
    </script>
</body>
</html>

Now run the application and you should see the following in the browser.

As soon as you click on the Append button, the existing h4 element moves from its original position and append at the end of the div element which you can see in the below image.

Example: jQuery Append Element using the callback function

Let us understand this concept with an example. In the below example, we have two <div> elements present in our DOM. The Append() method is iterating implicitly over them and performing a function. Parameter index is receiving the current index no. of the <div> and HTML is receiving previous HTML of the <div> element. The whole new content is appended to each of the div.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Append & Prepend Elements</title>
</head>
<body>
    <h3>jQuery Append Element using callback function</h3>
    <section>
      <div class="div1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </div>
      <div class="div2">
        Maiores porro quibusdam deserunt id unde odit fugit libero.
      </div>
    </section>
    </br>
    <button class="demo append">Append</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $(".append").click(function () {
          $("div").append(function (index, html) {
            return `<h4>Previous Content of div indexed at ${index}:</h4> ${html}`;
          });
        });
      });
    </script>
</body>
</html>

Now, run the above code and you should see the following output in the browser and also have a look at the Elements tab of the browser developer tool.

Now click on the Append button and you should get the following output in the browser.

jQuery appendTo() Method

The jQuery append() method and appendTo() method have exactly the same functionality. But the difference is in their syntax. The usage of these two is exactly the same.

Syntax: $(content).appendTo(selector)

Example: jQuery appendTo() method

Let us understand the jQuery AppendTo method with examples. In the below example, we are appending a <h4> to only that element having class div1.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Append & Prepend Elements</title>
</head>
<body>
    <h3>jQuery AppendTo Method</h3>
    <section>
      <div class="div1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </div>
      <div class="div2">
        Maiores porro quibusdam deserunt id unde odit fugit libero.
      </div>
    </section>
    </br>
    <button class="demo append">Append</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $(".append").click(function () {
          $("<h4>This is some content</h4>").appendTo($(".div1"));
        });
      });
    </script>
</body>
</html>

Now, run the above code and you should see the following output in the browser.

Now when you click on the Append button, it will add the h4 element to the div element which having the class div1 as shown in the below image.

What is the difference between jQuery append and appendTo methods?

In jQuery, both of these methods perform the same task. As discussed, the only difference between these two methods is in the syntax. With the jQuery append method, first, we specify the target elements and then the content that we want to append, whereas we do the opposite with the appendTo method.

jQuery Prepend() Method

Syntax: $(selector).prepend(content,function(index,html))
Parameters:
Content: This is a required parameter. This specifies the content to insert (can contain HTML tags)
Function: This is an optional callback function. It takes two optional parameters.

Index: Returns the index position of the element in the set
Html: Returns the current HTML of the selected element

Example: jQuery Prepend Method

Let us understand the jQuery Prepend method with some examples. In the below example, we have a div element and inside that, we have some content. By the jQuery prepend() method, we are inserting a <h4> element at starting of the <div> element.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Append & Prepend Elements</title>
</head>
<body>
    <h3>jQuery Prepend Method</h1>
    <section>
      <div class="div1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, enim
        veritatis ab fugiat ducimus, totam ratione quod
      </div>
    </section>
    </br>
    <button class="demo prepend">Prepend</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $(".prepend").click(function () {
          $("div").prepend("<h4>This is some content</h4>");
        });
      });
    </script>
</body>
</html>

Now run the application and you will get the following output in the browser. Also, have a look at the Elements tab of the browser developer tool which you will get by pressing the F12 key.

Now click on the Prepend button and you will see that the h4 element is inserted before the div element as shown in the below image.

Another Example For Better Understanding:

Now let’s see an example of an ordered listing. In the below example, we have an ordered list.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Append & Prepend Elements</title>
</head>
<body>
    <h3>jQuery Prepend Method</h3>
    <section>
      <div class="div1">
        <ol>
          <li>List item 1</li>
          <li>List item 2</li>
          <li>List item 3</li>
          <li>List item 4</li>
          <li>List item 5</li>
          <li>List item 6</li>
        </ol>
      </div>
    </section>
    </br>
    <button class="demo append">Append</button>
    <button class="demo prepend">Prepend</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $(".append").click(function () {
          $(".div1 ol").append("<li>Appended list item</li>");
        });
        $(".prepend").click(function () {
          $(".div1 ol").prepend("<li>Prepnded list item</li>");
        });
      });
    </script>
</body>
</html>

Now run the above code and then click on the append button. Once you click on the Append button a new list item is added. Notice that the order of the appended item is 7.

Now click on the Prepend button. Once you click on the Prepend button a new list item is added. Notice that the order of the new item is 1 i.e. new list item is added at the top of the list.

Look that the order number is maintained.

jQuery prependTo() Method

The jQuery prepend() method and prependTo() method have exactly the same functionality. But the difference is in their syntax. The usage of these two is exactly the same.

Syntax: $(content).prependTo(selector)

What is the difference between jQuery prepend and prependTo methods?

In jQuery, both of these methods perform the same task. As discussed, the only difference between these two methods is in the syntax. With the jQuery prepend method, first, we specify the target elements and then the content that we want to prepend, whereas we do the opposite with the prependTo method.

Example: appendTo() and prependTo() method

Let us understand the jQuery prependTo method with an example. In the below example, we are using appendTo() and prependTo() to add table rows at the end and at the top respectively.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Append & Prepend Elements</title>
</head>
<body>
    <h3>jQuery PrependTo and AppendTo Method</h3>
    <table id="code">
      <thead>
      <tr>
        <th>Front End</th>
        <th>Back End</th>
        <th>Data Base</th>
      </tr>
      </thead>
      <tbody>
        <td>jQuery</td>
        <td>PHP</td>
        <td>mySQL</td>
      </tr>
      <tr>
        <td>ReactJS</td>
        <td>Node JS</td>
        <td>MongoDB</td>
      </tr>
      <tr>
        <td>Angular</td>
        <td>Express JS</td>
        <td>PostgreSQL</td>
      </tr>
      </tbody>
    </table>
    </br>
    <button class="demo append">Append</button>
    <button class="demo prepend">Prepend</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $(".append").click(function () {
          $('<tr><td>VueJS</td><td>Java</td><td>Redis</td></tr>').appendTo("#code tbody");
        });
        $(".prepend").click(function () {
          $('<tr><td>Bootstrap</td><td>Ruby</td><td>Cassandra</td></tr>').prependTo("#code tbody");
        });
      });
    </script>
</body>
</html>

Now run the above code and you will get the following output.

Now click on the Append button. Once you click on the Append button, it will add a new table row at the end of the table body as shown in the below image.

Now, click on the Prepend button. Once you click on the Prepend button, it will add a new table row at the top of the table body as shown in the below image.

Difference between jQuery prepend and append Methods?

The jQuery prepend method, inserts the specified content to the beginning of each element in the set of matched elements, whereas the jQuery append method inserts the specified content to the end of each element in the set of matched elements.

In the next article, I am going to discuss how to insert elements before and after certain elements using jQuery with Examples. Here, in this article, I try to explain jQuery Append and Prepend Elements with Examples and I hope you enjoy this jQuery Append and Prepend Elements article.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.