Jquery HTML/CSS methods

hello guys,

welcome to our website wearewiter.com

So yesterday we covered the another jquery fundamental topic that is jquery events

Today we Discuss the Jquery HTML/CSS methods

  1. BEFORE() METHOD
  2. AFTER() METHOD

Jquery methods- before()

The jQuery before() method is used to insert the specified content before the selected elements.

SYNTAX-

$(selector).before(content, function(index))  

EXAMPLE-

<!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 world!</p>");
  });
});
</script>
</head>
<body style="color: white; background-color: gray;">
<h1>welcome to my  article by wearewriter.com</h1>
<p>Jquery HTML/CSS after () Method</p>
<hr>
<button>Insert content before each p element</button>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

OUTPUT-

Jquery methods- before()

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

SYNTAX

$(selector).after(content,function(index))

EXAMPLE-

<!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 world!</p>");
  });
});
</script>
</head>
<body style="color: white; background-color: gray;">
<h1>welcome to my  article by wearewriter.com</h1>
<p>Jquery HTML/CSS after () Method</p>
<hr>
<button>Insert content before each p element</button>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

OUTPUT-

SO these are two HTML/CSS method we will discuss another method. you can check out the latest updates in jquery website jquery.com

Thans for watching our article

Leave a Comment

Show Buttons
Hide Buttons