DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Techsolutionstuff
Techsolutionstuff

Posted on • Originally published at techsolutionstuff.com

jQuery After And Before Example

In this article, We will see examples of the jquery after() and before() methods. The before() method inserts specified content before the selected elements.

The after() method inserts specified content after the selected elements.

Using the jquery after() method you can append HTML after div, append text to div, and jquery add text after span.

Using the before() method you can add HTML before div, append HTML before div, append text before div, and jquery add text after span.

Example: After() Method

In this example, we will append HTML after p tag. It appends some text to the element on the button click event.

Syntax:

$(selector).after(content);
Enter fullscreen mode Exit fullscreen mode
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").after("<p>Hello, Techsolutionstuff !!</p>");
  });
});
</script>
</head>
<body>

<h3>Jquery After And Before Example - Techsolutionstuff</h3>
<p>This is a paragraph tag.</p>

<button>Insert content after P tag</button>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Example: Before() Method

In this example, we will append HTML before p tag. It appends text to the element on the button click event.

Syntax:

$(selector).before(content);
Enter fullscreen mode Exit fullscreen mode
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").before("<p>Hello, Techsolutionstuff !!</p>");
  });
});
</script>
</head>
<body style="padding:20px;">

<h3>Jquery After And Before Example - Techsolutionstuff</h3>
<p>This is a paragraph tag.</p>

<button>Insert content before P tag</button>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Latest comments (0)

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!