w3resource

jQuery: Insert a DOM element before all paragraphs

jQuery Fundamental - I : Exercise-37

Inserts a DOM element before all paragraphs using jQuery.

<body>
<p>PHP Tutorial</p>
<p>Python Tutorial</p>
<p>Java Tutorial</p>  
  <button id="button1">Click to see the effect</button> 
</body>

Sample solution :

HTML Code :

<!DOCTYPE html>
<html><head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Inserts a jQuery object before all paragraphs.</title>
</head>
<body>
<p>PHP Tutorial</p><b>w3resource</b>
<button id="button1">Click to see the effect</button>
</body> </html>

CSS Code :

button {
display: block;
margin: 20px 0 0 0;
}

JavaScript Code :

$('#button1').click(function(){ 
$( "p" ).before( $( "b" ) );
});

Used Methods :

  • .before() : Insert content, specified by the parameter, before each element in the set of matched elements.

See the Pen jquery-fundamental-exercise-37 by w3resource (@w3resource) on CodePen.


Contribute your code and comments through Disqus.

Previous: Inserts some HTML before all paragraphs using JQuery.
Next: Inserts a jQuery object before all paragraphs.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.




We are closing our Disqus commenting system for some maintenanace issues. You may write to us at reach[at]yahoo[dot]com or visit us at Facebook