These methods allow us to insert new content inside an existing element.
Insert content specified by the parameter at the beginning of each element in the set of matched elements.
.prepend(content)
.prepend(function)
The jQuery object, for chaining purposes.
The .prepend() and .prependTo() methods perform the same task. The major difference is in the syntax, specifically in the placement of the content and target. With .prepend(), the selector expression preceding the method is the container into which the content is inserted. With .prependTo(), on the other hand, the content precedes the method either as a selector expression or as markup created on the fly. It is then inserted into the target container.
Consider the following HTML code:
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
We can create content and insert it into several elements at once.
$('.inner').prepend('<p>Test</p>');
Each <div class=”inner”> element gets the following new content:
<h2>Greetings</h2>
<div class="container">
<div class="inner">
<p>Test</p>
Hello
</div>
<div class="inner">
<p>Test</p>
Goodbye
</div>
</div>
We can also select an element on the page and insert it into another:
$('.container').prepend($('h2'));
If an element selected this way is inserted elsewhere, it will be moved into the target (not cloned).
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
However, if there are more than one target elements, cloned copies of the inserted elements will be created for each target after the first.
Insert every element in the set of matched elements at the beginning of the target.
.prependTo(target)
The jQuery object, for chaining purposes.
The .prepend() and .prependTo() methods perform the same task. The major difference is in the syntax, specifically in the placement of the content and target. With .prepend(), the selector expression preceding the method is the container into which the content is inserted. With .prependTo(), on the other hand, the content precedes the method either as a selector expression or as markup created on the fly, and is inserted into the target container.
Consider the following HTML code:
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
We can create content and insert it into several elements at once.
$('<p>Test</p>').prependTo('.inner');
Each inner <div> element gets the following new content:
<h2>Greetings</h2>
<div class="container">
<div class="inner">
<p>Test</p>
Hello
</div>
<div class="inner">
<p>Test</p>
Goodbye
</div>
</div>
We can also select an element on the page and insert it into another.
$('h2').prependTo($('.container'));
If an element selected this way is inserted elsewhere, it will be moved into the target (not cloned).
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
However, if there are more than one target elements, cloned copies of the inserted elements will be created for each target after the first.
Insert content specified by the parameter at the end of each element in the set of matched elements.
.append(content)
.append(function)
The jQuery object, for chaining purposes.
The .append() and .appendTo() methods perform the same task. The major difference is in the syntax, specifically in the placement of the content and target. With .append(), the selector expression preceding the method is the container into which the content is inserted. With .appendTo(), on the other hand, the content precedes the method either as a selector expression or as markup created on the fly, and is inserted into the target container.
Consider the following HTML code:
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
We can create content and insert it into several elements at once.
$('.inner').append('<p>Test</p>');
Each inner <div> element gets the following new content:
<h2>Greetings</h2>
<div class="container">
<div class="inner">
Hello
<p>Test</p>
</div>
<div class="inner">
Goodbye
<p>Test</p>
</div>
</div>
We can also select an element on the page and insert it into another.
$('.container').append($('h2'));
If an element selected this way is inserted elsewhere, it will be moved into the target (not cloned).
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<h2>Greetings</h2>
</div>
However, if there is more than one target element, cloned copies of the inserted elements will be created for each target after the first.
Insert every element in the set of matched elements at the end of the target.
.appendTo(target)
The jQuery object, for chaining purposes.
The .append() and .appendTo() methods perform the same task. The major difference is in the syntax, specifically in the placement of the content and target. With .append(), the selector expression preceding the method is the container into which the content is inserted. With .appendTo(), on the other hand, the content precedes the method either as a selector expression or as markup created on the fly, and is inserted into the target container.
Consider the following HTML code:
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
We can create content and insert it into several elements at once.
$('<p>Test</p>').appendTo('.inner');
Each inner <div> element gets the following new content:
<h2>Greetings</h2>
<div class="container">
<div class="inner">
Hello
<p>Test</p>
</div>
<div class="inner">
Goodbye
<p>Test</p>
</div>
</div>
We can also select an element on the page and insert it into another.
$('h2').append($('.container'));
If an element selected this way is inserted elsewhere, it will be moved into the target (not cloned).
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<h2>Greetings</h2>
</div>
However, if there are more than one target elements, cloned copies of the inserted elements will be created for each target after the first.
I remember deciding to pursue my first IT certification, the CompTIA A+. I had signed…
Key takeaways The transformer architecture has proved to be revolutionary in outperforming the classical RNN…
Once we learn how to deploy an Ubuntu server, how to manage users, and how…
Key-takeaways: Clean code isn’t just a nice thing to have or a luxury in software projects; it's a necessity. If we…
While developing a web application, or setting dynamic pages and meta tags we need to deal with…
Software architecture is one of the most discussed topics in the software industry today, and…