Add or Create Element in jQuery DOM Manipulation (Inside Element)

The jQuery append() method appends specifies content to the end of the HTML elements that have been selected.

Tip: Use the prepend() method in jQuery to insert content at the start of the selected elements.

Syntax of append method in jQuery

$(selector).append(content,function(index,html))

Example of jQuery append method

To the end of all

elements, add the following content: 

$("button").click(function(){
$("p").append("Appended text");
});

The appendTo() method appends HTML elements to the end of the elements that have been selected.

Use the prependTo() method to insert HTML elements at the start of the selected elements.

Syntax of appendTo method in jQuery

$(content).appendTo(selector)

Example of jQuery appendTo method

At the end of each

element, add a element:

$("button").click(function(){
$("Hello World!").appendTo("p");
});

The html() method sets or returns the selected elements' content (inner HTML). This method returns the FIRST matched element's content when used to replace content.

The method overwrites ALL matched elements' content when used to set range.

Tip: Use the text() method to set or return only the text content of the selected elements.

Syntax of html method in jQuery

• Return content:

$(selector).html()

• Set content:

$(selector).html(content)

• Set content using a function:

$(selector).html(function(index,currentcontent))

Example of jQuery html method

Make the following changes to the content of all

elements:

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

The prepend() method appends the specified content to the beginning of the selected HTML elements.

Use the append() method to add content to the end of the selected elements.

Syntax of prepend method in jQuery

$(selector).prepend(content,function(index,html))

Example of jQuery prepend method

All

elements should have content at the start:

$("button").click(function(){
$("p").prepend("Prepended text");
});

The prependTo() method adds HTML elements to the beginning of the aspects that have been selected.

Use the appendTo() method to add HTML elements to the end of the selected elements.

Syntax of prependTo method in jQuery

$(content).prependTo(selector)

Example of jQuery prependTo method

At the start of each

element, add a element:

$("button").click(function(){
$("Hello World!").prependTo("p");
});

The text() method sets or returns the selected elements' text content.

This method returns the text content of all matched elements when used to produce content (HTML markup will be removed). The text() method in jQuery overwrites ALL matched elements' content when used to set range.

Syntax for text() method in jQuery

• Return text content:

$(selector).text()

• Set text content:

$(selector).text(content)

• Set text content using a function:

$(selector).text(function(index,currentcontent))

Example of jQuery text method

Set the text content for all p> elements as follows:

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