jQuery append

The jQuery append() method is used to insert specified content as the last child (at the end of) the selected elements in the jQuery collection.

The append () and appendTo () methods are used to perform the same task. The only difference between them is in the syntax.

Syntax:

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

Parameters of jQuery append() method

ParameterDescription
ContentIt is a mandatory parameter. It specifies the content which you want to insert. Its possible values are:HTML elementsjQuery objectsDOM elements
Function (index,html)It is an optional parameter. It specifies the function that returns the content to insert.Index: It returns the index position of the element in the set.HTML: It returns the current HTML of the selected element.

Example of jQuery append() method

Let’s take an example to demonstrate the jQuery append() method.

<!DOCTYPE html>  

<html>  

<head>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  

<script>  

$(document).ready(function(){  

    $("#btn1").click(function(){  

        $("p").append(" <b>Newly added appended text</b>.");  

    });  

    $("#btn2").click(function(){  

        $("ol").append("<li><b>Newly added appended item</b></li>");  

    });  

});  

</script>  

</head>  

<body>  

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

<p>This is another paragraph.</p>  

<ol>  

  <li>Item no.1</li>  

  <li>Item no.2</li>  

  <li>Item no.3</li>  

</ol>  

<button id="btn1">Append text</button>  

<button id="btn2">Append item</button>  

</body>  

</html>


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *