jQuery Add Element

One of the most important parts of jQuery is the ability to manipulate the DOM.

jQuery provides methods to add new HTML elements in an effective way.

In this chapter, we will explain how to add new HTML elements to the DOM./Content.

jQuery add new HTML content

With jQuery, we can easily add new HTML elements.

We have the following jQuery methods for adding new content:

• append()

• prepend()

• after()

• before()

• wrap()

Below, I will show you how to use each method.

jQuery append() method

jQuery append()The method inserts the specified content at the end of each selected element (as the last child).

The following example appends some text content to all paragraphs:

$("button").click(function(){
　　$("p").append("Hello world");
});

The following example appends HTML to all paragraphs:

$("button").click(function(){
　　$("p").append("<b>Hello world</b>");
});

jQuery prepend() method

jQuery prepend()The method inserts the specified content at the beginning of each selected element (as the first child).

The following example adds some text content before all paragraphs:

$("button").click(function(){
　　$("p").prepend("Hello world");
});

The following example adds some HTML before all paragraphs:

$("button").click(function(){
　　$("p").prepend("<b>Hello world</b>");
});

Using append() and prepend() to add multiple elements

In the above example, we only inserted text at the beginning/Some text was inserted at the end/ HTML.

However,append()andprepend()Methods can take an unlimited number of new elements as parameters.

New elements can be generated using HTML elements (such as in the above example), DOM elements, or jQuery objects.

In the following example, we create several new elements using HTML elements, DOM elements, and jQuery objects:

function appendText() {
　　let x = "<p>Example text.<"/　　//　p>";　　
　　Create Element with HTML/p>");　　//　Create with jQuery
　　let z = document.createElement("p");//　Create with DOM
　　z.innerHTML = "Example text.";
　　$("body").append(x, y, z);　　//Add new elements　
}

jQuery after() method

jQuery after()The method inserts the specified content after the selected element.

The following example inserts content after each paragraph:

$("button").click(function(){
　　$("p").after("<p>Hello world</p>");
});

jQuery before() method

jQuery before()The method inserts the specified content before the selected element.

The following example inserts content before each paragraph:

$("button").click(function(){
　　$("p").before("<p>Hello world</p>");
});

Adding multiple elements with after() and before()

Similarly,after()andbefore()Methods can take an unlimited number of new elements as parameters.

New elements can be generated using HTML elements (such as in the above example), DOM elements, or jQuery objects.

In the following example, we create several new elements using HTML elements, DOM elements, and jQuery objects:

function afterText() {
　　let x = "<p>Example text.<"/　　//　p>";　　
　　Create Element with HTML/p>");　　//　Create with jQuery
　　let z = document.createElement("p");//　Create with DOM
　　z.innerHTML = "Example text.";
　$("h1}).after(x, y, z);　　//　In <h1Insert New Element After >
}

jQuery wrap() Method

jQuery wrap()The method wraps the specified HTML structure before and after each selected element.

The following example wraps the DIV element before and after each <p> element:

$("button").click(function(){
　　$("p").wrap("<div><"/div>"
});

jQuery HTML Reference

For a complete reference of HTML methods, please visit ourjQuery HTML / CSS Reference.