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.
It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.
https://www.w3resource.com/jquery-exercises/1/jquery-fundamental-exercise-36.php
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics