JQuery append() And appendTo() Example

JQuery Append() Method

JQuery append method used to insert content to the end of each element inside matching of HTML elements. It inserts specified content as the last child of each element in the jQuery collection. With append() method, the selector expression preceding the method is the container into which the content is inserted.

JQuery Append() Syntax

$(selector).append(content);

It contains parameter called content which specifies content to be inserted at the end of each element in the set of matched elements.

JQuery Append() Example

<!doctype html>
<head>
<title>JQuery Append Method</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Append Method Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
      $("button").click(function(){
        $(".myappend").append("<strong>Welcome to JavaBeat</strong>");
      });
   });
</script>
<body>
   <button>Click Here</button>
      <div class="myappend">
        <p>Hello World!!!</p>
      </div>
</body>
</html>

As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
$(“button”).click(function()) line defines click event which occurs when button is clicked.
$(“.myappend”).append(“Welcome to JavaBeat“); statement indicates JS interpreter to append the content in quotes to div class elements.
When you run the script, click on the button which will appear on the browser, the line Welcome to JavaBeat appends after the line Hello World!!!.

When you run the above example, you would get the following output:

Try JQuery Append Method Demo

JQuery AppendTo() Method

The appendTo() method also do the same task as append() method does. It inserts content to the end of target inside matching of HTML elements. With the appendTo() method, the content precedes the method as selector expression and inserted into the target container. The major difference between both methods is in the syntax.

JQuery AppendTo() Syntax

$(content).appendTo(selector);

It contains parameter called selector which specifies to which target the content to be inserted in the set of matched elements.

JQuery AppendTo() Example

<!doctype html>
<head>
<title>JQuery AppendTo Method</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery AppendTo Method Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
      $("button").click(function(){
        $("<strong>Welcome to JavaBeat</strong>").appendTo(".myappend");
      });
   });
</script>
<body>
   <button>Click Here</button>
   <div class="myappend">
        <p>Hello World!!!</p>
   </div>
</body>
</html>

As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
$(“button”).click(function()) line defines click event which occurs when button is clicked.
$(“Welcome to JavaBeat“).appendTo(“.myappend”); statement indicates JS interpreter to append the content in quotes to div class elements.
When you run the script, click on the button which will appear on the browser, the line Welcome to JavaBeat appends after the line Hello World!!!