Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to insert element as a last child using jQuery?
To insert element as a last child using jQuery, use the append() method. The append(content) method appends content to the inside of every matched element, positioning it as the last child of the selected parent element.
Syntax
The basic syntax for the append() method is ?
$(selector).append(content)
Where content can be HTML strings, DOM elements, jQuery objects, or functions that return content.
Example
You can try to run the following code to learn how to insert element as a last child using jQuery ?
<html>
<head>
<title>jQuery Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
var x = 0;
$(document).ready(function() {
$('.add').on('click', function(event) {
var html = "<div class='child-div'>Demo text " + x++ + "</div>";
$("#parent-div").append(html);
});
});
</script>
<style>
#parent-div {
margin: 10px;
padding: 12px;
border: 2px solid #F38B00;
width: 200px;
}
.child-div {
background-color: #f0f0f0;
padding: 5px;
margin: 2px 0;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="parent-div">
<div>Hello World</div>
</div>
<input type="button" value="Click to add" class="add" />
</body>
</html>
In this example, each time you click the button, a new div element with incremented text is added as the last child of the parent div. The newly added elements will appear after all existing child elements.
Conclusion
The jQuery append() method is a simple and effective way to insert elements as the last child of selected parent elements. It automatically positions new content at the end of the existing children, making it perfect for dynamically building lists or adding content progressively.
5K+ Views
