jQuery Insert

/

In this tutorial you will learn how to use jQuery Insert to insert new elements or contents to the document using jQuery.

jQuery Insert New Content

jQuery provides several methods, such as append(), prepend(), html(), text(), before(),after(), wrap() etc. that allow 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.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inserting HTML Contents At the End of the Elements in jQuery</title>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // Append all paragraphs on document ready
    $("p").append(' <a href="#">read more...</a>');
    
    // Append a div container on button click
    $("button").click(function(){
       $("#container").append("This is demo text.");
    });
});
</script>
</head>
<body>
    <button type="button">Insert Text</button>
    <div id="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.</p>
        <p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti.</p>
    </div>
</body>
</html>

Note:The contents or elements inserted using the jQuery append() and prepend()methods is added inside of the selected elements.

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 type="text/javascript">
$(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>

Insert Multiple Elements with append() and 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 type="text/javascript">
$(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>

jQuery before() Method

The jQuery before() method is used to insert content after the selected elements.

The following example will insert a paragraph before the container element on document ready, whereas insert an image before the <h1> element on button click.

<script type="text/javascript">
$(document).ready(function(){
    // Add content before an element with ID container
    $("#container").before("<p>&mdash; The Beginning &mdash;</p>");
    
    // Add content before headings
    $("button").click(function(){
        $("h1").before('<img src="images/marker-left.gif" alt="Symbol">');
    });
});
</script>

Note:The contents or elements inserted using the jQuery before() and after()methods is added outside of the selected elements.

jQuery after() Method

The jQuery after() method is used to insert content after the selected elements.

The following example will insert a paragraph after the container element on document ready, whereas insert an image after the <h1> element on button click.

<script type="text/javascript">
$(document).ready(function(){
    // Add content after an element with ID container
    $("#container").after("<p>&mdash; The End &mdash;</p>");
    
    // Add content after headings
    $("button").click(function(){
        $("h1").after('<img src="images/marker-right.gif" alt="Symbol">');
    });
});
</script>

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

The jQuery before() and after() also supports passing in multiple arguments as input to implement jQuery insert. The following example will insert a <h1>, <p> and an <img> element before the <p> elements.

<script type="text/javascript">
$(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>

jQuery wrap() Method

The jQuery wrap() method is used to wrap an HTML structure around the selected elements.

The following example will wrap the container elements with a <div> element with the class'wrapper' on document ready, whereas wrap all the inner content of the paragraph elements first with the <b> and again with <em> element.

<script type="text/javascript">
$(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>

The above mentioned tutorial gives you an overview of how to use jQuery insert with online editor. You can try the code from our online tryit editor. Here is the link for tryit editor by techTutorialsOnline.