Inserting content into page in jQuery

We can use following jQuery methods to insert content into page :

• before()
• after()
• prepend()
• prependTo()
• append()
• appendTo()

 
The following diagram explains where the new content is inserted in each of these methods.

jQuery before() method

 
This method inserts content before selected elements.

HTML

<p id="oldpara">
Old Paragraph
</p>
<button>insert new parapraph</button>

jQuery

$(document).ready(function(){
    $("button").click(function(){
        $("#oldpara").before("<p>New Paragraph</p>");
    });
});

Output

Click on button below to see the results :

 

jQuery after() method

 
This method inserts content before selected elements.

HTML

<p id="oldpara">
Old Paragraph
</p>
<button>insert new parapraph</button>

jQuery

$(document).ready(function(){
    $("button").click(function(){
        $("#oldpara").after("<p>New Paragraph</p>");
    });
});

Output

Click on button below to see the results :

 

jQuery prepend() method

 
This method inserts content inside the selected element(s), after the opening tag.

HTML

<p id="oldpara">
Old Paragraph
</p>
<button>prepend</button>

jQuery

$(document).ready(function(){
    $("button").click(function(){
        $("#oldpara").prepend("New content : ");
    });
});

Output

Click on button below to see the results :

 

jQuery prepend vs prependTo() method

 
The .prepend() and .prependTo() methods perform the same task, and the output will be same as well.

However, the signature differs with the placement of the content and selector. In .prepend(), the selector comes first, while with .prependTo(), the content comes first, then the selector expression.

To understand simply,

a.prepend (b) adds b to a
a.prependTo{b) adds a to b

jQuery append() method

 
This method inserts content inside the selected element(s), before the closing tag.

HTML

<p id="oldpara">
Old Paragraph
</p>
<button>append</button>

jQuery

$(document).ready(function(){
    $("button").click(function(){
        $("#oldpara").append("New content : ");
    });
});

Output

Click on button below to see the results :

jQuery append vs appendTo() method

 
The .append() and .appendTo() methods perform the same task, and the output will be same as well.

However, the signature differs with the placement of the content and selector. In .append(), the selector comes first, while with .appendTo(), the content comes first, then the selector expression.

To understand simply,

a.append(b) adds b to a
a.appendTo(b) adds a to b

append() vs after()

 
append(): Insert content, specified by the parameter, to the end of each element in the set of matched elements.
after(): Insert content, specified by the parameter, after each element in the set of matched elements.
 

prepend() vs before()

 
prepend(): Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
before(): Insert content, specified by the parameter, before each element in the set of matched elements.
 

So, .append() and .prepend() adds the new elements as child elements to the target.

But .after() and .before() adds the new elements as sibling elements to the target.
 

© 2016, https:. All rights reserved. On republishing this post, you must provide link to original post