What is jQuery append method?

In many scenarios, you may need to add content, some plain text, HTML text or other elements to your web page without reloading.

Add content by append example

jQuery makes it quite easier by way of few methods that allow adding the content in the web pages. The placement of content can also be controlled easily, depending on jQuery method you are using to add content.

Add HTML example

Methods to add content

Following are methods supported in jQuery to add content:

1- $.append

The append method adds content to the end of a given element. For example:

p.append(“content”) will add content to the end of paragraphs in the document.

2- $.prepend

The prepend method, as opposed to append method, adds content at the beginning of the specified element. For example:

p.append(“content”) will add content at the beginning of paragraphs in the document.

This chapter only explains how to use append jQuery method with examples. First of all syntax of using append() method in jQuery. For learning more about prepend method: Go here

Syntax of append() method

The syntax of the jQuery append() method is:

selector.append(“content to be added”);

Where selector can be an element where you want to add content.

Example of using .append method in paragraph to insert plain text

In the example below, we will show you how to add simple text at the end of a paragraph. As you click on the button “Add content”, it will add given plain text attached to the click event of the button to end of the paragraph.

Experience this example online

jQuery append HTML Example

Similarly, you can add content that contains HTML tags by using append method. For example, it can contain <b> tag, hyperlinks <a>, etc.

The example below adds bold text and a link as you click on the “Add content” button.

Experience this example online

Example of using $.append method in body and creating new Div

In this example, new div elements are created by using jQuery append method. As you click on the “Add content” button, new div element at the body level will be created. In order to stand out each div element, style is applied by using the CSS border.

Experience this example online

 

Also see jQuery prepend | $.before | The click method