How to use jQuery append to Add HTML or other Contents with Examples

Purpose of append method in jQuery

The append method of jQuery is used to add content to the specified elements in DOM.

  • The HTML or other content will be added at the end of the specified element. Alternatively, this would be the last child of elements that you specify.
  • The jQuery append is quite useful as in different scenarios you need to add content on the fly like based on certain user’s actions.
  • Examples can be adding new table rows in an HTML table or adding div elements.
  • Not understood yet? Have a look at the examples given below with complete code.

A quick example to see append working

This is a simple example of using the jQuery append method where I will append div element in the body section of the document.

As you click on the button, the append method will add a div element. Keep on clicking and new elements with the same CSS and text will be created.

Code with jQuery

<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#appendex").click(function(){
    $("body").append("<div>A div element with some text</div> ");
  });
});
</script>
<style>
div
{
height:30px;
width:300px;
background:#E4E4E4;
border: solid 1px #355681;
margin:6px;
}
</style>
</head>

<body>
<button id="appendex">Create new div</button>

</body>
</html>

Sample output:

jquery append

So this is where $.append method creates new div elements in the script section:

$(“body”).append(“<div>A div element with some text</div> “);

i.e. it adds div in the body section of DOM.

An append example in the HTML table

You may append or add content in different elements of the DOM by using jQuery append method.

Not only you can add paragraphs, div elements, and others but also HTML table content as well.

In this example, a table is already created as the page loads with heading (th) and dummy table data.

Also, the table is assigned some basic CSS properties.

  • A button is given to create new rows.
  • On click event of the button, the .append method is used to create table row and table data with dummy text for demonstration.
  • First have a look at this example code and output:

jquery append table

Markup and jQuery

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script>
$(document).ready(function(){
$("tr").each(function(x) { if (x % 2) this.style.backgroundColor = "#FBF9F4"; });
    
    $(".addrow").click(function(){
    $(".tblcls").append("<tr><td>Table data</td><td>Table data</td></tr>");
    $("tr").each(function(x) { if (x % 2) this.style.backgroundColor = "#FBF9F4"; });
    });
});
</script>

<style>
.tblcls{
    border-collapse: collapse;
    border: 2px solid #846733;
  }
.tblcls th{
    border: 2px solid #544221;
    color: #fff;
    background:#846733;
  }
.tblcls tr{
    padding:10px;
    border: 1px dotted black;
    color: #000;
    background:#D0BA80;
  }
.tblcls td{
    padding:10px;
    border: 1px dotted black;
    color: #000;

  }
.addrow
{
    margin:5px;
}
</style>

</head>

<body>
<button class="addrow">New row by .append</button><br />
<table class="tblcls">
  <tr>
      <th>Col 1</th>
      <th>Col 2</th>
  </tr>
  <tr>
      <td>Table data</td>
      <td>Table data</td>
  </tr>
  <tr>
      <td>Table data</td>
      <td>Table data</td>
  </tr>
  <tr>
      <td>Table data</td>
      <td>Table data</td>
  </tr>  
</table>
</body>
</html>

In the code section of the above code, look at this line:

$(“.tblcls”).append(“<tr><td>Table data</td><td>Table data</td></tr>”);

It uses the class name tblcls which is a table class in that example.

This is followed by the $.append method and then within quotes is the code to create a new table row and data.

Note that, this is just dummy data. In real-time, you can use variables to feed some users or database-driven data by concatenating the string and replacing it with “Table data” text.
Also note, if you have multiple elements of the same class e.g. having two different tables with the same class name tblcls then append method will add text or content in both tables. Consider the following example.

Append method adds content to all matched elements?

To demonstrate whether the append method will add content to the first matched or all matched elements, I am using almost the same example as above.

For that, I have simply created another table with a single row at first.

The new table is using the same class name as the first one. Click on “Add new row by .append” button and see what happens:

A demo of jQuery Append method to show if it adds content to all matched elements?

As the button is clicked, a new table row will be added to both tables. That means the append method will add content to all matched elements in the DOM.

Whether it is a table or div, you call it by class name or element name like “div”, “p” or other it will find and add content as the last child.

An example of jQuery append HTML

In above example, I showed how to use jQuery append to add text and table data. Table data is itself adding HTML into DOM by using the append method example.

In the following example, I will add other HTML tags like <a> tag, and bold text in the h3 heading that will be created inside a div element.

Markup with jQuery

<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#appendex").click(function(){
    $(".divcls").append("<h3>Add content by append method</h3> including <b>bold text</b> and a <a href='https://jquery.com/'>link</a> and a line-break <br><hr>");
  });
});
</script>
<style>
.divcls
{

width:300px;
background:#E4E4E4;
border: solid 1px #355681;
margin:6px;
}
</style>
</head>

<body>
<button id="appendex">Add content in div with a heading, link and bold text</button>
<div class="divcls"></div>

</body>
</html>

Sample output:

jquery append formatted text

This line of code:

$(".divcls").append("<h3>Add content by append method</h3> including <b>bold text</b> and a <a href='http://jquery.com/'>link</a> and a line-break <br><hr>");

will append text that includes an h3 heading, text with bold, and a link. Also, it adds a link to the parent div element.

Example of append with form elements

Just like other elements, you can add or append form elements as the last child in web pages by using the append method.

In the following example, a form is created with three fields as the web page loads, with three buttons.

One button is to create a textbox field, the other is to create a checkbox and the last one is to create a dropdown (select – option).

jquery append textbox check dropdown

Code:

<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#appendex").click(function(){
    $(".divcls").append("<div><label>New textbox</label>: <input id='txtid' /></div>");
  });

$("#appendcheck").click(function(){
    $(".divcls").append("<div><label>New Checkbox</label>: <input type='checkbox' name='checktest' value='checkbox' >Checkbox</div>");
  });
  
$("#appendselect").click(function(){
    $(".divcls").append("<div><label>New dropdown</label>: <select id='selid'><option>Value 1</option><option>Value 2</option></select></div>");
  });  
  
});
</script>
<style>
.divcls
{

width:300px;
background:#fff;
border: solid 1px #355681;
margin:6px;
}
label {
    display: inline-block; width: 7em;
  }
</style>
</head>

<body>
<button id="appendex">Add a text box</button>
<button id="appendcheck">Add checkbox</button>
<button id="appendselect">Add a dropdown</button>

<p>A Form with append example</p>
<div class="divcls">
<div><label>Your Name</label>: <input id="name" title="Enter your full name"/></div>
<div><label>Email</label>: <input id="email" title="Enter your Email address"/></div>
<div><label>Password:</label>: <input id="password" />
</div>

</body>
</html>

The following lines of code with append method is attached to the respective button’s click event:

To add a textbox:

$(".divcls").append("<div><label>New textbox</label>: <input id='txtid' /></div>");

To add checkbox:

$(".divcls").append("<div><label>New Checkbox</label>: <input type='checkbox' name='checktest' value='checkbox' >Checkbox</div>");

To add select dropdown:

$(".divcls").append("<div><label>New dropdown</label>: <select id='selid'><option>Value 1</option><option>Value 2</option></select></div>");
One piece of advice is to use $.append method quite carefully for performance. Especially if you are using append in JS for loop to create large content. If not used properly it can compromise JavaScript performance.