w3resource

jQuery: Insert some HTML before all paragraphs

jQuery Fundamental - I : Exercise-36

Inserts some HTML 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 some HTML before all paragraphs using JQuery.</title>
<style type="text/css">
button {
display: block;
 margin: 20px 0 0 0;
  }
  </style>
</head>
<body>
<p>PHP Tutorial</p>
<p>Python Tutorial</p>
<p>Java Tutorial</p>
<button id="button1">Click to see the effect</button>
</body>
</html>

JavaScript Code:

$('#button1').click(function(){ 
$( "p" ).before( "<i>w3resource.com</i>" );
});

Used Methods :

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

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


Contribute your code and comments through Disqus.

Previous: Finds all inputs with an attribute name that starts with 'P' and puts text in them.
Next: Inserts a DOM element before all paragraphs using jQuery.

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.