BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl

jQuery before() Method

By Chaitanya Singh | Filed Under: jQuery

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:
jQuery before() Method
After the button click:
jQuery before() Method

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:
jQuery before() Method using a function
After the button click:
jQuery before() Method using a function

❮ jQuery after()jQuery append() ❯

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()
  • jQuery addClass()
  • jQuery hasClass()
  • jQuery removeClass()
  • jQuery toggleClass()
  • jQuery after()
  • jQuery before()
  • jQuery append()
  • jQuery appendTo()
  • jQuery clone()
  • jQuery insertBefore()
  • jQuery insertAfter()
  • jQuery attr()
  • jQuery text()
  • jQuery val()
  • jQuery css()
  • jQuery prepend()
  • jQuery remove()
  • jQuery empty()
  • jQuery detach()

Copyright © 2012 – 2022 BeginnersBook . Privacy Policy . Sitemap