How to use HTML Append Method in JQuery

This article describe about HTML Append Method in JQuery.
  • 1597

HTML append() method in jQuery

The append method is used to insert an element on the selected position.

This append method add the element at the end position of the selected element.

The Append method and AppendTo method both are same thing but the syntax will be different.

Syntax

$(selector).append(content)

Example

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function ()

 {

        $("button").click(function ()

{

            $("p").append(" <b>Hello !</b>");

        });

    });

</script>

</head>

<body style ="background-color:red">

<p>This is a JQuery.</p>

<p>This is HTML.</p>

<button>Insert content at the end of each p element</button>

</body>

</html>

Output1

op1.jpg

Output2

op2.jpg

Using a Function

We use a function to insert specified content at the end of the selected elements.

Syntax

$(selector).append(function(index,html))

You may also want to read these related articles here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2013 dotNetheaven. All rights reserved.