jQuery Tutorial Tutorials - jQuery .after() method

jQuery .after() method

The .after() method in jQuery is used to insert content after each matched element (outside).

jQuery .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])

example

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>

Try now

example

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>

Try now

.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>

Try now

Date：2019-08-20 16:34:54 From:www.Lautturi.com author：Lautturi
.removeData() method
.append() method