How to use jQuery append to add HTML or other content with examples

Purpose of append method

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 have specified.

The jQuery append is quite useful as in different scenarios you need to add content on the fly like on the basis of certain user’s action. Examples can be adding new table rows in an HTML table or adding div elements.

Not understood yet? Have a look at examples given below with online demo.

A quick example to see append working

This is a very simple example of using append jQuery method where I will simply 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 same CSS and text will be created.

See online demo and code

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

1	$("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 HTML table

You may append or add content in different elements of DOM by using jQuery append method. Not only you can add paragraphs, div element 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 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 by clicking the link or image below:

See online demo and code

In the code section of demo look at this line:

 

It uses the class name tblcls which is a table class in that example. This is followed by 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 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 append method will add content to 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:

See online demo and code

As the button is clicked, a new table row will be added in both tables. That means the append method will add content to all matched elements in 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 append method example.

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

See online demo and code

This line of code:

 

will append text that includes h3 heading, text with bold and a link. Also, it adds a link into 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 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). Click the link or image to see code and demo online:

See online demo and code

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

To add a textbox:

 

To add checkbox:

 

To add select dropdown:

 

One piece of advice is to use $.append method quite carefully for performance. Especially if you are using append in for loop to create large content. If not used properly it can compromise JavaScript performance.