jQuery provides several methods, like append()
, prepend()
, html()
, text()
, before()
, after()
, wrap()
etc. that allows us to insert new content inside an existing element.
The jQuery html()
and text()
methods have already covered in the previous chapter, so in this chapter, we will discuss about the rest of them.
append()
MethodThe jQuery append()
method is used to insert content to the end of the selected elements.
The following example will append some HTML to all the paragraphs on document ready, whereas append some text to the container element on button click.
<script>
$(document).ready(function(){
// Append all paragraphs
$("p").append(' <a href="#">read more...</a>');
// Append an element with ID container
$("button").click(function(){
$("#container").append("This is demo text.");
});
});
</script>
prepend()
MethodThe prepend()
method is used to insert content to the beginning of the selected elements.
The following example will prepend some HTML to all the paragraphs on document ready, whereas prepend some text to the container element on button click.
<script>
$(document).ready(function(){
// Prepend all paragraphs
$("p").prepend("<strong>Note:</strong> ");
// Prepend an element with ID container
$("button").click(function(){
$("#container").prepend("This is demo text.");
});
});
</script>
append()
& prepend()
MethodThe jQuery append()
and prepend()
also supports passing in multiple arguments as input.
The jQuery code in the following example will insert a <h1>
, <p>
and an <img>
element inside the <body>
element as a last three child nodes.
<script>
$(document).ready(function(){
var newHeading = "<h1>Important Note:</h1>";
var newParagraph = document.createElement("p");
newParagraph.innerHTML = "<em>Lorem Ipsum is dummy text...</em>";
var newImage = $('<img src="images/smiley.png" alt="Symbol">');
$("body").append(newHeading, newParagraph, newImage);
});
</script>
before()
& after()
MethodThe jQuery before()
and after()
also supports passing in multiple arguments as input. The following example will insert a <h1>
, <p>
and an <img>
element before the <p>
elements.
<script>
$(document).ready(function(){
var newHeading = "<h2>Important Note:</h2>";
var newParagraph = document.createElement("p");
newParagraph.innerHTML = "<em>Lorem Ipsum is dummy text...</em>";
var newImage = $('<img src="images/smiley.png" alt="Symbol">');
$("p").before(newHeading, newParagraph, newImage);
});
</script>
wrap()
MethodThe jQuery wrap()
method is used to wrap an HTML structure around the selected elements.
<script>
$(document).ready(function(){
// Wrap elements with class container with HTML
$(".container").wrap('<div class="wrapper"></div>');
// Wrap paragraph's content with HTML
$("button").click(function(){
$("p").contents().wrap("<em><b></b></em>");
});
});
</script>