Inserting content(DOM Insertion)

Inserting content(DOM Insertion)

Inserting Dom contents to html ,can be categories in the following 4 categories :

• DOM insertion
• DOM insertion, Around
• DOM insertion, Inside
• DOM insertion, Outside

Now we are going to elaborate these  topics :

DOM insertion(.html tag)

Click here to get detail

DOM insertion, Around

Using these method , we can insert new content around existing content :

.unwrap( )

The .unwrap() method removes the element's parent from the matched set .It leaves the matched element at their place.

Example :

$("p").unwrap();

This script removes the parent of 'p'.

.wrap( wrappingElement )

This method wrap the html wrapping element around each of the matched elements. The 'wrapedElement ' may be div, span etc.

Example :

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

It wrap a div element around each matched 'p'. The structure will be wrapped around each of the elements in the set of matched elements.

.wrapAll( wrappingElement )

This method wrap the html wrapping element around all the matched elements. The 'wrapedElement ' may be div, span etc. The structure will be wrapped around all of the elements in the set of matched elements, as a single group.

Example :

$("p").wrapAll("<div></div>");

It wrap div around all the 'p' element as a single group.

.wrapInner( wrappingElement )

This method wrap inside the provided 'wrappingElement'.

Example :

$("p").wrapInner("<b></b>");

It wrap <b> inside the 'p' or 'p' s.

DOM Insertion, Inside

This method allow us to insert new content inside an existing once

.append( content)

This method add new content inside the matched set of element , after the existing contents.

Example : 0

$('.inner').append('<p>Test</p>');


This method insert <p> inside the div class named 'inner ' after it's existing content.

.appendTo( target ) 1

This method insert every element in the set of matched elements to the end of the target.

Example :

It add '<p>Test</p>' before the div named 'inner'. 2

.text( )

This method get the combined text contents of each element in the set of matched elements, including their descendants.

Example : 3

Consider the following code :

 <div class="demo-container">
   <div class="demo-box">Demonstration Box</div>
   <ul>
   <li>list item 1</li>
   <li>list <strong>item</strong> 2</li>
   </ul>
 </div>

The $('div.demo-container').text()  will gives following output :

Demonstration Box list item 1 list item 2 4

DOM insertion, Outside

The methods falling in this category allow us to insert new content outside an existing element.

.after( )

This method add element after each matched set element. 5

Example :

$('.inner').after('<p>Test</p>');

It append the element '<p>Test</p>' after every matched div whose name is 'inner'. 6

.before( )

This method add element before each matched set element.

Example : 7

$('.inner').before('<p>Test</p>');

It add the element '<p>Test</p>' before every matched div whose name is 'inner'. 8

.insertAfter( )

This method insert every element in the set of matched elements after the target.

Example : 9

$('<p>Test</p>').insertAfter('.inner');

It append the element '<p>Test</p>' after every matched div whose name is 'inner'.

.insertBefore( ) 0

This method insert every element in the set of matched elements before the target.

Example :

$('<p>Test</p>').insertBefore('.inner'); 1

It add the element '<p>Test</p>' before every matched div whose name is 'inner'.

Learn from experts! Attend jQuery Training classes.