JQUERY BASIC
JQUERY EFFECTS
JQUERY MANIPULATION
JQUERY ADVANCED
JQUERY EXAMPLES
JQUERY REFERENCE

jQuery Insert Content

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

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

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() & 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 before 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() & 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 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 jQuery code in 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>

Your Feedback:

We would love to hear from you, please drop us a line.