The jQuery Method of .append() allows you to add content to the end of each element specified by the selector. If the selector is a text tag, or and id or class name for a text tag, .append() will place the content inside of the tag at the end of any existing text. If the selector is a div of some sort, you can add tags within the content to add a new line of text.

<script">
    $(document).ready(function() {
        $(".introBox").append("<h3>George Abernathy</h3>");
        $("#pwgive").append("Gbn42*7");
    });
</script>

<div class="introBox">
    <h2>Welcome to our site</h2>
</div>
<p id="pwgive">Your password is: </p>

Result of the script:

Welcome to our site

George Abernathy

Your password is: Gbn42*7

Three dot cartouche

Use .append() to move one element inside of another

The .append() method can also be used go grab an element from somewhere else and move it to inside of another element.

  • it does not clone the initial element, as in it does not leave a copy in the original location
  • it will make multiple copies of the original element if there are multiple of the selector specified
  • the syntax for what goes in the parentheses after .append must include  $(), see below

$(document).ready(function() {
    $(".introBox").append($("#pwgive"));
});

<p id="pwgive">Your password is Gbn42*7</p>
<div class="introBox">
    <h2>Welcome to our site</h2>
    <h3>George Abernathy</h3>
</div>

Welcome to our site

George Abernathy

Your password is: Gbn42*7

Three dot cartouche

.append() vs .appendTo()

These two API methods do essentially the same thing, but the syntax is different. 

With .append() the selector preceding .append() is the container in which the content of the parentheses is inserted.

$("#introBox").append("Welcome, John Smith")

This example above shows how .append() places the content in the parentheses of "Welcome, John Smith" into the container id="introBox".

With .appendTo(), the content in the selector preceeds the method and the parentheses of the method hold the name of the container.

$("h2#clientname").appendTo("#introBox");

In the example above, .appendTo() takes the selector of h2 id="clientName" and places it into the container of id="introBox".