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 append an element before an element using jQuery?
To append an element before an element, use the insertBefore() method. The insertBefore(selector) method inserts all of the matched elements before another, specified, set of elements.
Syntax
The basic syntax for the insertBefore() method is ?
$(selector).insertBefore(target)
Where selector is the element to be moved and target is the element before which the selector will be inserted.
Example
The following example demonstrates how to use the insertBefore() method to move an element before other elements when clicked ?
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("div").click(function () {
$("#source").insertBefore(this);
});
});
</script>
<style>
.div {
margin:10px;
padding:12px;
border:2px solid #666;
width:60px;
height:60px;
}
</style>
</head>
<body>
<p>Click on any square below to see the result:</p>
<div class = "div" style = "background-color:blue;"></div>
<div class = "div" style = "background-color:green;"></div>
<div class = "div" style = "background-color:red;"></div>
<div class = "div" id = "source" style = "background-color:yellow;"></div>
</body>
</html>
When you click on any colored square, the yellow square (with id "source") will move and position itself before the clicked element.
Conclusion
The insertBefore() method is a powerful jQuery function that allows you to dynamically reposition elements in the DOM by inserting them before specified target elements.
3K+ Views
