jQuery

jQuery appendTo Example

The aim of this example is to explain and use jQuery’s .appendTo() method. What this method does, basically, is insert every element in the set of matched elements to the end of the target. This method is the opposite of .prependTo() which inserts HTML elements at the beginning of the selected elements.

This method is used to dynamically insert content of our choice, which can be done on a click of a button or some other event listener. It is used because in a lot of cases, you don’t wanna bother users with a lot of information since they open the page, or it is either for functional reasons.
 
 

1. Document Setup

To begin, create a new HTML document and add the following basic syntax inside:

<!DOCTYPE html>
<html>
<head>
	<title>jQuery AppendTo Example</title>
</head>
<body>

<!-- HTML SECTION  -->


<!-- JAVASCRIPT SECTION  -->
<script src="jquery-1.11.3.min.js"></script>

<script type="text/javascript">

</script>

</body>
</html>

Notice that the jQuery library is linked locally. To download it, go here.

Basic Syntax

The syntax of the method is: $(content).appendTo(selector).

content is required. It specifies the content to insert (must contain HTML tags).
selector – is also required. It specifies on which elements to append the content to.

2. Cases and Examples

The following examples represent the essential cases of using the method.

2.1 Example 1

In this example, we’re adding a span element dynamically, that is, with jQuery. The span element is going to be added after the paragraphs we’ll create and on click of a button. Look at the HTML below:

<!-- HTML SECTION  -->

<button>Insert Text</button>
<p>Lorem ipsum dolor sit amet.</p>
<p>Another lorem ipsum dolor sit amet paragraph</p>

In jQuery, the implementation would look like this:

<!-- JAVASCRIPT SECTION  -->

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("<span> Added text, do you notice?</span>").appendTo("p");
    });
});
</script>

The result would be:
appendTo-1

2.2 Example 2

In this example, the aim is to demonstrate the insertion of an existing HTML element after another. The HTML would look like this:

<!-- HTML SECTION  -->

<button>Insert Text</button>

<p>Lorem ipsum dolor sit amet.</p>
<p>Another lorem ipsum dolor sit amet paragraph.</p>

<span style="font-weight: bold;"> I already existed.</span>

In jQuery, just select the span element and use the method to insert it after the paragraphs.

<!-- JAVASCRIPT SECTION  -->

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("span").appendTo("p");
    });
});
</script>

appendTo-2

2.3 Example 3

This third example just shows that you can perform the method with all kinds of selectors or multiple of them and also on various event handlers. Below, we’ve taken into consideration a case where classes, id’s and event handlers are used. Here, we use the .mouseover() method. The HTML structure would have a button, a div where elements are going to be attached and also two spans configures with the appropriate classes. like so:

<!-- HTML SECTION  -->

<button>Insert Text</button>
<br>
<div id="paraclass">I am a paragraph.</div>
<br>
<span class="spanclass" style="font-weight: bold;"> I already existed first.</span>
<br>
<span class="spanclass1" style="font-weight: bold;"> I already existed second.</span>

In jQuery, the application would be the same but we’d have a few more lines:

<!-- JAVASCRIPT SECTION  -->

<script type="text/javascript">
$(document).ready(function(){
        $("button").mouseover(function(){
        $(this).text("Mouseover");
        $(".spanclass").appendTo("#paraclass");
        $(".spanclass, .spanclass1").appendTo("#paraclass");
    });
});
</script>

The result in the browser would look like this:
appendTo-3

3. Conclusion

To conclude, it is important to say that 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 it is inserted into the target container.

4. Download

Download
You can download the full source code of this example here: jQuery AppendTo

Fabio Cimo

Fabio is a passionate student in web tehnologies including front-end (HTML/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
Back to top button