.append()

In this chapter you will learn:

Syntax and Description for .append() method
How to append hard code HTML tags
How to add text node created by document
How to add element to all paragraphs

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>
<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>/*from   j  a v  a 2 s .com*/
<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>
</div>

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

Append hard code HTML tags

The following code appends HTML tag.

<html><!--   java  2 s .c  om-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("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><!--from j  av a 2  s . c  om-->
<head>
  <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
     $("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><!--from   j a v a  2s  .co m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("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

Next chapter...

What you will learn in the next chapter: