jQuery Tutorial Tutorials - jQuery .prepend() method

jQuery .prepend() method

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

jQuery .prepend() method Syntax

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

.prepend(content,[content])

example

Insert text before all paragraphs
HTML

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

jQuery

$("p").prepend("<strong> At Lautturi.com </strong>");

Result

<p><strong> At Lautturi.com </strong>Learn JavaScript</p>
<p><strong> At Lautturi.com </strong>Learn jQuery</p>
<p><strong> At Lautturi.com </strong>Learn Python</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").prepend($('h2'));

Result

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

Try now

.prepend(function)

Add links for all items
HTML

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

jQuery

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

Result

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

Try now

Date：2019-08-25 09:55:23 From:www.Lautturi.com author：Lautturi
.insertBefore() method
.prependTo() method