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
How to insert element as a first child using jQuery?
To insert element as a first child using jQuery, use the prepend() method. The prepend(content) method prepends content to the inside of every matched element, positioning it as the first child.
The prepend() method is particularly useful when you need to add new content at the beginning of an element's children, rather than at the end like append() does.
Syntax
The basic syntax for the prepend method is −
$(selector).prepend(content)
Where content can be HTML strings, DOM elements, text nodes, or jQuery objects.
Example
You can try to run the following code to learn how to insert element as a first child using jQuery −
<html>
<head>
<title>jQuery Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/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").prepend(html);
});
});
</script>
<style>
.child-div {
margin: 10px;
padding: 12px;
border: 2px solid #F38B00;
width: 60px;
background-color: #f9f9f9;
}
#parent-div {
border: 2px solid #333;
padding: 20px;
margin: 10px;
}
</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 is added as the first child of the parent div. The counter variable x ensures each new element has unique text content.
The prepend() method provides an efficient way to dynamically add content at the beginning of any element's children in jQuery.
7K+ Views
