jQuery Append
by Vincy. Last modified on July 12th, 2022.
While creating web applications, appending content into an HTML target on a particular event is an interesting task. In an HTML container, we can add any content using jQuery append.
The added content will be literally appended. That means the existing content will be there followed by appended content.
jQuery Append Functions
- append()
- appendTo()
These two functions are identical in their results but differ in syntax. Performance-wise they differ but not significantly.
append is targetContainer.append(newContent) and appendTo is;newContent.appendTo(targetContainer)
jQuery append()
targetContainer.append(newContent)
This function is invoked with the reference of any selector string. It contains a parameter to accept content to be appended to the target.
While invoking jQuery append(), it will search for the target HTML container with respect to the selector string. If a match is found, then content will be added as the last child of target HTML tags. For example,
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script language="javascript">
$(document).ready(function() {
$(".message").append("Added using jQuery append()");
});
</script>
<div class="message">Message:</div>
Output:
<div class="message">Message: Added using jQuery append()</div>
jQuery appendTo()
newContent.appendTo(targetContainer);
targetContainer – inside which HTML container the new content is to be added.
newContent – is the new content chosen to be added. It can be a selector or HTML content.
Using the jQuery appendTo() function, we can move the existing element into a target container tag. And, we can also create new content to be appended with the target. For example,
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script language="javascript">
$(document).ready(function() {
//example-1 moving the first occurring paragraph to the class message
$("p").appendTo($(".message"));
//example-2 append the given html content to class message
$("<p>new content appended</p>").appendTo($(".message"));
});
</script>
<p>moved paragraph tag appended with target div</p>
<div class="message">Message: </div>
The first existing paragraph tag is moved into the target div and added as its last child. And then new paragraph tag is created on the fly and added to the existing content of the target.
Output after first appendTo call:
<div class="message">Message: <p>moved paragraph tag appended with target div</p></div>
Output after the second appendTo call:
<div class="message">Message: <p>moved paragraph tag appended with target div</p><p>new content appended</p></div>
Download jQuery Append Source Code
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.