.after()
methodThe .after()
method in jQuery is used to insert content after each matched element (outside).
.after()
method Syntax.after(content,[content]) .after(function)
Parameter | Type | Description |
---|---|---|
content |
htmlString,element,text | DOM content to insert after each matched elements. |
function(index) |
Function | A function returning an HTML string,DOM element(s),text or jQuery Object. The index parameter is the position of the element in the set. |
.after(content,[content])
Insert HTML content after all paragraphs
HTML
<div class="container"> <p>Learn JavaScript</p> <p>Learn jQuery</p> </div>
jQuery
$("p").after("<p> Lautturi.com </p>");
Result
<div class="container"> <p>Learn JavaScript</p> <p> Lautturi.com </p> <p>Learn jQuery</p> <p> Lautturi.com </p> </div>
Move the dom element (not clone)
HTML
<h2>tutorial</h2> <div id="container"> <p>Learn JavaScript</p> <p>Learn jQuery</p> <p>Learn Python</p> </div>
jQuery
$("#container").after($('h2'));
Result
<div id="container"> <p>Learn JavaScript</p> <p>Learn jQuery</p> <p>Learn Python</p> </div> <h2>tutorial</h2>
.after(function)
Add links for all items
HTML
<ul> <li>JavaScript</li> <li>jQuery</li> <li>Python</li> </ul>
jQuery
$("li").after(function(index,oldHtml){ return '<li><a href="lautturi.com/' + oldHtml + '">' + oldHtml + '</a></li>'; });
Result
<ul> <li>JavaScript</li> <li><a href="lautturi.com/JavaScript">JavaScript</a></li> <li>jQuery</li> <li><a href="lautturi.com/jQuery">jQuery</a></li> <li>Python</li> <li><a href="lautturi.com/Python">Python</a></li> </ul>