jQuery HTML Append Prepend Example

jQuery insert/add html content using append() & prepend() method; In this tutorial, i am going to show you how to add/insert html content using append() and prepend() method.

jQuery Append and Prepend Elements

In jQuery, There are two methods available for inserting content in html. You can use the methods of The jQuery append() & prepend() methods are inserting the specified content as the last and first child of each element in the selected html elements

  • jQuery append() method
  • jQuery prepend() method

jQuery append() method

Using the jQuery append() method, you can insert the specified content to the end of the selected html elements. . This method adds the content specified using the element id, name, class, tag, attribute, etc.

Syntax of jQuery append() method

 $(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 elements, jQuery objects, DOM 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 1 – jQuery Insert Content using Append()

See the following example of jquery insert content using append(); as shown below:

<!DOCTYPE html>  
<html>  
<head>  
<title>Learn Jquery Append Method</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("#btn_append").click(function(){  
        $("#item_append").append("<li><b>New appended item</b></li>");  
    });  
});  
</script>  
</head>  
<body>  
<ol id="item_append">  
  <li>Item no.1</li>  
  <li>Item no.2</li>  
  <li>Item no.3</li>  
</ol>  
<button id="btn_append" style="font-weight: bold; font-size: 16px; margin-top: 25px;">Click here to Append item</button>  
</body>  
</html>  

jQuery prepend() Method

Using the jQuery prepend() method, you can insert the specified content to the beginning of the selected html elements.. This method adds the content specified using the element id, name, class, tag, attribute etc.

Syntax of jQuery prepend() Method

$(selector).prepend(content,function(index,html)); 

Parameters of jQuery prepend() Method

ParameterDescription
ContentIt is a mandatory parameter. It specifies the content to insert. Its possible values are:HTML elementsjQuery objectsDOM elements
Function (index)It specifies a function that returns the content which is used to insert.index: It provides the index position of the element in the set.

Example 1 – jQuery Insert Content using prepend ()

See the following example of jquery insert content using prepend() method; as shown below:

<!DOCTYPE html>  
<html>  
<head> 
<title>Learn Jquery Prepend Method</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>  
$(document).ready(function(){  
    $("#btn_prepend").click(function(){  
        $("#item_prepend").prepend("<li>Prepended item</li>");  
    });  
});  
</script>  
</head>  
<body>  
<ol id="item_prepend">  
  <li>Item no.1</li>  
  <li>Item no.2</li>  
  <li>Item no.3</li>  
</ol>  
<button id="btn_prepend" style="font-weight: bold; font-size: 16px; margin-top: 25px;">Prepend list item</button>  
</body>  
</html>  

Recommended jQuery Tutorials

Leave a Comment