jQuery Tutorial Tutorials - jQuery .append() method

jQuery .append() method

The .append(content) method in jQuery is used to insert HTML content to the end of every matched element.

jQuery .append() method Syntax

.append(content,[content])
.append(function)
Parameter Type Description
content htmlString,element,text DOM content to be appended.
function(index,html) Function A function returning an HTML string. It accepte two parameters. The index parameter is the position of the element in the set and html is the old HTML value.

.append(content,[content])

example

Appends text to all paragraphs
HTML

<p>Learn JavaScript</p>
<p>Learn jQuery</p>
<p>Learn Python</p>

jQuery

$("p").append("<strong> on Lautturi.com</strong>");

Result

<p>Learn JavaScript<strong> on Lautturi.com</strong></p>
<p>Learn jQuery<strong> on Lautturi.com</strong></p>
<p>Learn Python<strong> on Lautturi.com</strong></p>

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").append($('h2'));

Result

<div id="container">
    <p>Learn JavaScript</p>
    <p>Learn jQuery</p>
    <p>Learn Python</p>
    <h2>tutorial</h2>
</div>

Try now

.append(function)

Add links for all items
HTML

<ul>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Python</li>
</ul>

jQuery

$("li").append(function(index,oldHtml){
    return '<a href="lautturi.com/' + oldHtml + '">' + oldHtml + '</a>';
});

Result

<ul>
    <li>JavaScript<a href="lautturi.com/JavaScript">JavaScript</a></li>
    <li>jQuery<a href="lautturi.com/jQuery">jQuery</a></li>
    <li>Python<a href="lautturi.com/Python">Python</a></li>
</ul>

Try now

Date：2019-08-21 12:13:46 From:www.Lautturi.com author：Lautturi
.after() method
.appendTo() method