jquery Insert Content

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.

jQuery append() Method

The 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>

Example -

jQuery prepend() Method

The 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>

Example -

Insert Multiple Elements with append() & prepend() Method

The 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>

Example -

Insert Multiple Elements with before() & after() Method

The 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>

Example -

jQuery wrap() Method

The 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>

Example -