JQuery - Adding Elements Inside Existing Elements - DYclassroom

In this tutorial we will learn to manipulate DOM by adding new elements inside existing elements using jQuery.

There are 6 methods that we can use to add new element inside an existing element.

• text()
• html()
• append()
• appendTo()
• prepend()
• prependTo()

text()

We use the text() method to add text and get text from an element.

If we want to add text then we just have to pass the text value to the method.

In the following example we are adding text "Hello World" to a paragraph having id "sample-p1".

$("#sample-p1").text("Hello World");

We can also use the text() method to get the text value of any element.

In the following example we will get text content of the paragraph having id "sample-p1" in the browser console.

console.log( $("#sample-p1").text() );

text() method will escape the text passed to it. So, if we pass any HTML tag then it will be escaped and printed as text and not as HTML element.

In the following example we are passing a paragraph to a div having id "sample-div1".

$("#sample-div1").text("<p style='color: red;'>Hello World</p>");

This will give us the following output.

<p style='color: red;'>Hello World</p>

We can see that we got the text and not the actual paragraph tag with the content. To solve this issue we use the html() method.

html()

We use the html() method when we want to add html tags and its content.

In the following example we are adding a paragraph to a div having id "sample-div1".

$("#sample-div1").html("<p style='color: red;'>Hello World</p>");

This will give us the following output.

Hello World

append()

We use the append() method to add new element inside an exisiting element and at the end.

In the following example we have a div having id "sample-div1" and it has 3 paragraphs and we are adding a new paragraph at the end using the append() method.

HTML

<div id="sample-div1"> <p>Para 1</p> <p>Para 2</p> <p>Para 3</p> </div>

jQuery

$("#sample-div1").append("<p>Para 4</p>");

Output

<div id="sample-div1"> <p>Para 1</p> <p>Para 2</p> <p>Para 3</p> <p>Para 4</p> </div>

appendTo()

This is similar to append() method and only differs in the way we write the code to add new element inside an existing element and at the end.

We are considering the same above example and adding a new paragraph at the end inside a div having id "sample-div1".

$("<p>Para 4</p>").appendTo("#sample-div1");

prepend()

We use the prepend() method to add a new element inside an existing element and at the beginning.

In the following example we have a div having id "sample-div1" and it has 3 paragraphs and we are adding a new paragraph at the beginning using the prepend() method.

HTML

<div id="sample-div1"> <p>Para 1</p> <p>Para 2</p> <p>Para 3</p> </div>

jQuery

$("#sample-div1").prepend("<p>Para 4</p>");

Output

<div id="sample-div1"> <p>Para 4</p> <p>Para 1</p> <p>Para 2</p> <p>Para 3</p> </div>

prependTo()

This is similar to prepend() method and only differs in the way we write the code to add new element inside an existing element and at the beginning.

We are considering the same above example and adding a new paragraph at the beginning inside a div having id "sample-div1".

$("<p>Para 4</p>").prependTo("#sample-div1");