jQuery API

.append()

Categories: Manipulation > DOM Insertion, Inside

.append( content ) Returns: jQuery

Description: Insert content, specified by the parameter, to the end of each element in the set of matched elements.

  • version added: 1.0.append( content )

    contentAn element, HTML string, or jQuery object to insert at the end of each element in the set of matched elements.

  • version added: 1.4.append( function(index, html) )

    function(index, html)A function that returns an HTML string to insert at the end of each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments.

The .append() method inserts the specified content as the last child of each element in the jQuery collection (To insert it as the first child, use .prepend()).

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.

Consider the following HTML:

<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 this 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>

If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first.

Examples:

Example: Appends some HTML to all paragraphs. 

<!DOCTYPE html>
<html>
<head>
  <style>
  p { background:yellow; }
</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
	<p>I would like to say: </p>
<script>
  $("p").append("<strong>Hello</strong>");
</script>

</body>
</html>

Demo:

Example: Appends an Element to all paragraphs. 

<!DOCTYPE html>
<html>
<head>
  <style>
  p { background:yellow; }
</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
	<p>I would like to say: </p>

<script>
  $("p").append(document.createTextNode("Hello"));
</script>

</body>
</html>

Demo:

Example: Appends a jQuery object (similar to an Array of DOM Elements) to all paragraphs. 

<!DOCTYPE html>
<html>
<head>
  <style>
  p { background:yellow; }
</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
	<strong>Hello world!!!</strong><p>I would like to say: </p>
<script>
  $("p").append( $("strong") );
</script>

</body>
</html>

Demo:

Comments

  • Support requests, bug reports, and off-topic comments will be deleted without warning.

  • Please do post corrections or additional examples for .append() below. We aim to quickly move corrections into the documentation.
  • If you need help, post at the forums or in the #jquery IRC channel.
  • Report bugs on the bug tracker or the jQuery Forum.
  • Discussions about the API specifically should be addressed in the Developing jQuery Core forum.
  • I am adding <script> tags to the DOM using the following code:

    $(document).ready(function () {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "http://somedomain.com/somescript.js";
    ; $("head").append(s);
    });

    While somescript.js loads and I can access the variables inside it, I don't see the actual <script> tag in the DOM. Is this normal?</script>
  • yes, it's normal
  • Syt
    could you elaborate please ?

    When one add a <link> tag, he can see it in the DOM.

    IMO, this inconsistency could be considerated as a bug...
  • All of jQuery's insertion methods use a domManip function internally to clean/process elements before and after they are inserted into the DOM. One of the things the domManip function does is pull out any script elements about to be inserted and run them through an "evalScript routine" rather than inject them with the rest of the DOM fragment. It inserts the scripts separately, evaluates them, and then removes them from the DOM.

    I believe that one of the reasons jQuery does this is to avoid "Permission Denied" errors that can occur in Internet Explorer when inserting scripts under certain circumstances. It also avoids repeatedly inserting/evaluating the same script (which could potentially cause problems) if it is within a containing element that you are inserting and then moving around the DOM.

    My understanding of the intricacies of script injection is pretty limited, so if you'd like to discuss it further, maybe you could post a topic on the jQuery forum.
  • Ryan Kinal
    A quick example on how to use the second form of this function:

    If we have HTML:
    <div id="element">Hello</div>

    $('#element').append(function(index, html) {
    return ', John';
    });

    Will result in

    <div id="element">Hello, John</div>

    Being overly clever with it can result in infinite recursion:

    $('#element').append(function(index, html) {
    return html + ', John';
    });

    I'm not sure exactly why this happens, or what is going on behind the scenes, but I killed a couple browsers that way.
  • I really hope that was a Jurassic Park reference.
  • What is the return value: the element that was inserted or the new target element ?
  • In jQuery 1.4.2, the return value is the receiver, NOT the inserted content. console.log( $('body').append('<div>')[0].tagName ) // BODY</div>
  • The documentation should state that append(), appendTo(), prepend(), prependTo() and similar jQuery functions silently remove event handlers from a HTML document fragment string.

    So the following code:

    body.append('<div>Test</div>');

    will result in:

    <div>
    Test
    </div>
  • You just should use the new Object notation:
    body.append($("<div>", {
    href: "#",
    click: function(){
    alert("will work.");
    }
    });</div>
  • Ben
    How?

    I appended a button with a click function defined but it does nothing. Is it possible?

    $("div.pagination").append($("<button>", {className: "formbtn pagebtn", text: "Next ยป", click:function()
    {
    alert("next");
    console.debug("next");
    // currentpage += 1;
    // MGL_ADMIN.render_table(tableid, window[tableid]);
    }
    }));
    </button>
  • Ben
    It you add an element with events to more than one element (using append), then none of the events work.

    E.g. I have two divs with the class "pagination". If I append buttons based on the class name, then the clicks do NOT work. However if I append based on an ID, then the clicks DO work.

    This seems counter-intuitive. Could this be supported in future?

    BTW I am using Jquery 1.4.2

    Thanks,
  • you have to doit this way
    $('#insert_button').button().live('click', function(event)
    {
    $('#div').append('<button id="the_button">Eliminar</button>' );
    };
    $('#the_button').button().live('click', function(event)
    {
    //do something
    }

    it works for sure but some styles may be lost im still looking a workaround
    found it...seems like when creating a new button jquery is finding more than one instance of the same id so you must have an unique id or an unique attribute in the button so the selector is able to find correctly wich one is for example
    mybutton has an unique attribute named numrow so y find it this way
    $("#mybutton[numrow=\'"+$i+"\']")

    so de $i changes

    y forgot the .button() is from the ui library
  • andrewhancox
    It should be noted that any attempts to append script elements using this method will fail silently:
    $('#element').append("<script></script>");
  • Not exactly. Scripts will be evaluated first, and then discarded. So, if you do this: $('#element').append("<script>alert('hello');</script>");
    You'll see the alert.
  • rebus
    Thanks for info - that's what i've been looking for :)
  • I thought append always took multiple arguments and appended them each in turn? Is this usage (which does still seem to work) not supported? Or is it just missing from the documentation?

    e.g. $('#selector').append('one', 'two', $('<div>3</div>
  • Galymzhan
    I think u can do like this: $("#selector").append('one').append('two').append('3), because API requires only ONE argument.
  • But this:

    $("selector").append(one, two, three);

    a) works
    b) is faster
    c) and more efficient

    so i think its missing in the Docu.
  • I found the same to be true, the undocumented functionality is to support an arbitrary number of objects as parameters:

    var $obj = $('<div id="object1">');
    var $obj2 = $('<div id="object2">');
    $('body').append($obj, $obj2);</div></div>