jQuery Introduction | Manipulating Elements | Adding Elements .append() .prepend() .before() .after()

Adding Inside Existing Elements

The following methods let you add new elements or content inside existing elements.

.append() Method

The .append() method adds a new HTML element or content to the end of the selected element.

$(target).append(source)

It adds the source object to the end of the target object.

When HTML elements exist as follows:

<ol id="list">
    <li>First item</li>
    <li>Second item</li>
</ol>

Using the .append() method, you can add a new HTML element after the second <li>.

$("#list").append("<li>Newly added item</li>");

Run code

.prepend() Method

The .prepend() method adds a new element or content to the beginning of the selected element.

$(target).prepend(source)

It adds the source object to the beginning of the target object.

When HTML elements exist as follows:

<ol id="list">
    <li>First item</li>
    <li>Second item</li>
</ol>

Using the .prepend() method, you can add a new HTML element before the first <li>.

$("#list").prepend("<li>Newly added item</li>");

Run code

.appendTo() Method

The .appendTo() method adds the selected element to the end of the target element. Its behavior is the same as .append(), but the positions of the source and target are reversed.

$(source).appendTo(target)

It adds the source object to the end of the target object.

When an HTML element exists as follows:

<p>Hello.</p>

Using the .appendTo() method, you can add a new HTML element after the first <p>.

$("<span>This is jQuery.</span>").appendTo("p");

Run code

.prependTo() Method

The .prependTo() method adds the selected element to the beginning of the target element. Its behavior is the same as .prepend(), but the positions of the source and target are reversed.

$(source).prependTo(target)

It adds the source object to the beginning of the target object.

When an HTML element exists as follows:

<p>Hello.</p>

Using the .prependTo() method, you can add a new HTML element before the <p> element.

$("<span>This is jQuery.</span>").prependTo("p");

Run code

Adding Outside Existing Elements

The following methods let you add new elements or content before or after existing elements.

.before() Method

The .before() method adds a new element or content immediately before the selected element.

$(target).before(source)

It adds the source object immediately before the target object.

When an HTML element exists as follows:

<p>Hello.</p>

Using the .before() method, you can add a new HTML element before the <p> element.

var i = 0;
$("button").on("click", function() {
    $("p").before("<div>This is sentence " + (++i) + ".</div>");
});

Each time the button is clicked, the variable i increases and is displayed.

Run code

.after() Method

The .after() method adds a new element or content immediately after the selected element.

$(target).after(source)

It adds the source object immediately after the target object.

When an HTML element exists as follows:

<p>Hello.</p>

Using the .after() method, you can add a new HTML element after the first <p>.

var i = 0;
$("button").on("click", function() {
    $("p").after("<div>This is sentence " + (++i) + ".</div>");
});

Each time the button is clicked, the variable i increases and is displayed.

Run code

.insertBefore() Method

The .insertBefore() method adds the selected element before the target element. Its behavior is the same as .before(), but the positions of the source and target are reversed.

$(source).insertBefore(target)

It adds the source object immediately before the target object.

When an HTML element exists as follows:

<p>Hello.</p>

Using the .insertBefore() method, you can add a new HTML element before the <p> element.

var i = 0;
$("button").on("click", function() {
    $("<div>This is sentence " + (++i) + ".</div>").insertBefore("p");
});

Each time the button is clicked, the variable i increases and is displayed.

Run code

.insertAfter() Method

The .insertAfter() method adds the selected element after the target element. Its behavior is the same as .after(), but the positions of the source and target are reversed.

$(source).insertAfter(target)

It adds the source object immediately after the target object.

When an HTML element exists as follows:

<p>Hello.</p>

Using the .insertAfter() method, you can add a new HTML element after the <p> element.

var i = 0;
$("button").on("click", function() {
    $("<div>This is sentence " + (++i) + ".</div>").insertAfter("p");
});

Each time the button is clicked, the variable i increases and is displayed.

Run code

Adding Elements That Wrap Existing Elements

The following methods let you add new elements or content that wrap existing elements.

.wrap() Method

The .wrap() method adds a new element that wraps the selected element.

$(function() {
    $("button").on("click", function() {
        $("p").wrap("<div class='wrap'></div>");
    });
});

When HTML elements exist as follows:

<p>Hello.</p>
<p>This is devkuma.</p>

Using the .wrap() method, each <p> element can be wrapped with a new HTML element.

$("p").wrap("<div class='wrap'></div>");

Run code

.wrapAll() Method

The .wrapAll() method adds a new element that wraps all selected elements at once.

$(function() {
    $("button").on("click", function() {
        $("p").wrapAll("<div class='wrap'></div>");
    });
});

When HTML elements exist as follows:

<p>Hello.</p>
<p>This is devkuma.</p>

Using the .wrapAll() method, all <p> elements can be wrapped at once with a new HTML element.

$("p").wrapAll("<div class='wrap'></div>");

Run code

.wrapInner() Method

The .wrapInner() method adds a new element that wraps inside the selected element.

When an HTML element exists as follows:

<p>Hello. This is devkuma.</p>

Using the .wrapInner() method, you can wrap the inside of the <p> element with a new HTML element.

$("p").wrapInner("<div class='wrap'></div>");

Run code

Changing the Inside of Existing Elements

The following methods let you return or set new elements or content inside existing elements.

.html() Method

The .html() method changes the content of the selected element to a new HTML element.

When an HTML element exists as follows:

<p>Hello.</p>

Using the .html() method, you can change the content of the <p> element to a new HTML element.

$("p").html("<div class='wrap'>This is devkuma.</div>");

Run code

.text() Method

The .text() method changes the content of the selected element to plain text.

When an HTML element exists as follows:

<p>Hello.</p>

Using the .text() method, you can change the content of the <p> element to new text.

$("p").text("This is devkuma.");

Run code

Difference Between .html() and .text()

If the content of the selected element includes HTML tag elements, .html() applies and displays those tags, while .text() displays the sentence as-is without applying the HTML tags.

When an HTML element exists as follows:

<p>Hello.</p>

If a sentence containing HTML is displayed with .text() as below, the HTML tags are not applied and the sentence is displayed as-is.

$("p").text("<div class='wrap'>This is devkuma.</div>");

Run code