Home »
jQuery »
jQuery DOM Manipulation Methods
jQuery before() Method
jQuery | before() Method: Learn about the jQuery before() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 14, 2022
before() Method
Sometimes it is necessary to access a particular element on the web page. Not only that, at times there is a need to add, remove, or manipulated the text and the content using jQuery. When we need to add some content or text in an HTML document, there are various methods for it using jQuery. One of them is - the before() method. This method helps you to add the content right before the selected element. The content that has to be added can be specified over here.
before() Method Syntax
$('selector').before('content',function());
The element is selected using the selector. This method takes two parameters – content, and function. The content is the text or data that you wish to provide over there. The function is an optional parameter. When the content is specified within the before() method, then it can have any HTML tag, CSS properties, jQuery objects, and DOM elements in it.
Hence, this method is useful to add any type of content before the targeted location. It will add the specified content before all the matched elements with the selector. The below-provided example will help to understand the implementation of the before() method more easily. The content gets added as many times as the button is clicked.
jQuery before() Method Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<h2>jQuery - Before</h2>
<p>Click the button to add some content before the image.</p>
<button>Click Here</button>
<hr>
<img id="myImg" src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=">
<h3></h3>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$('img').before('<h3 style="color: #C66102">Welcome to Include Help !!!</h3>');
})
});
</script>
</html>
Output:
