jQuery .append() method add elements to the selected one

Syntax and Description

  • .append(content)
    content: An element, an HTML string, or a jQuery object to insert at the end of each matched element
  • .append(function)
    function: A function that returns an HTML string to insert at the end of each matched element

.append() method inserts content specified by the parameter at the end of each matched element.

Consider the following HTML code:


<h2>Header</h2>//w  ww.  j  a v a  2 s .  c o m
<div class="container">
 <div class="inner">Hello</div>
 <div class="inner">InnerText</div>
</div>

The following code creates content and inserts it into several elements at once.


$('.inner').append('<p>Test</p>');

The result would be:


<h2>Header</h2>/*  ww  w  .  j  a v  a 2  s . c om*/
<div class="container">
 <div class="inner">
 Hello
 <p>Test</p>
 </div>
 <div class="inner">
 InnerText
 <p>Test</p>
 </div>
</div>

The following code selects an element on the page and insert it into another.

$('.container').append($('h2'));

If an element selected is inserted elsewhere, it will be moved into the target not cloned.


<div class="container">
 <div class="inner">Hello</div>
 <div class="inner">InnerText</div>
 <h2>Header</h2>/*from   ww w  . j ava  2  s .  c o m*/
</div>

The return value is the jQuery object, for chaining purposes.

Append hard code HTML tags

The following code appends HTML tag.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from w ww . j a v a2s.c  o  m-->
             $("p").append("<strong>Hello</strong>");
        });
    </script>
  </head>
  <body>
    <body>
         <p>java2s.com</p>
         <p>java2s.com</p>
         <p>java2s.com</p>
         <p>java2s.com</p>
  </body>
</html>

Click to view the demo

Add Text node created by document

The following code creates text node and applies styles. Then append to new created tags.


<html>
<head>
  <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){<!--from w  ww. j av  a 2s . c om-->
     $("p").html("<b>bold</b>");
     $("p b").append(document.createTextNode("added")).css("color", "red");
  });
  </script>
</head>
<body>
  <body>
       <p>ja va2s.com</p>
</body>
</html>

Click to view the demo

Add element to all paragraphs

The following code appends an element to all paragraphs.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--   ww w .j  a v  a 2  s .c o m-->
              $("p").append( $("b") );
        });
    </script>
    <style>
      .selected { color:blue; }
    </style>
  </head>
  <body>
    <body>
          <b>java2s.com</b><p>java2s.com: </p>
    </body>
</html>

Click to view the demo





















Home »
  jQuery »
    jQuery Tutorial »




Basics
Selector
DOM
Event
Effect
Utilities