The jQuery before() method inserts the specified content before the selected elements. This works similar to after() method except that it inserts the content before the selected element.
Syntax of jQuery before() method
$(selector).after(content, function(n))Here, content represents the content that is inserted before the selected elements. This content can be HTML elements, jQuery objects or DOM elements or a simple text/value.
$(selector): This selects the elements before which the content is inserted by before() method. Read more: jQuery selectors.
function(n): This is an optional parameter, it can be used when you need to insert before using the function. Here, n represents the index for the selected elements. Refer the second example to understand the use of function in before() method.
Example 1: jQuery before(): Adding content created with content HTML, jQuery and DOM
In this example, we are adding content created with HTML, jQuery and DOM before the paragraphs using the before() method.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var str1 = "<b>Hi </b>"; //Content created with HTML
var str2 = $("<i></i>").text("BeginnersBook "); //Created with jQuery
var str3 = document.createElement("b"); //Content created with DOM
str3.innerHTML = "Readers!";
$("p").before(str1, str2, str3);
});
});
</script>
</head>
<body>
<h1>jQuery before() example on BeginnersBook.com</h1>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<button>Insert content</button>
</body>
</html>Output:
Before the button click:
After the button click:
Example 2: jQuery before() – Insert content using a function
We can also insert the content before the selected element using a function. In this example, we are passing the function as a parameter to the before() method. This function returns the content that is added by the method, the content can be different for the selected elements based on index (represented by the n).
As you can see the content added is different for each paragraph as the index value is different for each paragraph. The first paragraph has index value as 0 and the second paragraph has index value 1 and so on.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").before(function(n){
return "<div>Index of the following paragraph is: " + n + ".</div>";
});
});
});
</script>
</head>
<body>
<h1>BeginnersBook.com Example: jQuery before() method</h1>
<button>Insert content before each paragraph</button>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</body>
</html>Output:
Before the button click:
After the button click:
Leave a Reply