jQuery Insert


append(), prepend(), html(), text(), before(), after(), wrap(), and other jQuery methods enable us to insert new content within an established element.

We discussed the jQuery html() and text() methods in the previous tutorial, so we'll go over the rest of them in this tutorial.


The append() method


To add content to the end of the selected items, use the jQuery append() process.

On document ready, the following example will append some HTML to all paragraphs, while on button press, it will append some text to the heading part.



$(document).ready(function(){
  // Append all paragraphs
  $("p").append(' <a href="#">read more...</a>');

  // Append an element with ID heading
  $("button").click(function(){
    $("#heading").append("This is demo text.");
  });
});
Live Demo!


The prepend() method


To add content to the beginning of the selected items, use the prepend() process.

On document ready, the following example will prepend some HTML to all paragraphs, while on button press, it will prepend some text to the heading element.



$(document).ready(function(){
  // Prepend all paragraphs
  $("p").prepend("<strong>Note:</strong> ");

  // Prepend an element with ID heading
  $("button").click(function(){
    $("#heading").prepend("This is demo text.");
  });
});
Live Demo!


Using the append() and prepend() methods, you can insert multiple elements.


Multiple arguments can be passed as input to the jQuery append() and prepend() functions.

The jQuery code in the following example will insert a <h1>, <p>, and <img> element as the last three child nodes within the <body> element.



$(document).ready(function(){
  var newHeading = "<h1>Important Note:</h1>";
  var newParagraph = document.createElement("p");
  newParagraph.innerHTML = "<em>Dummy text...</em>";
  var newImage = '<img src="images/smiley.png" alt="Symbol">';
  $("body").append(newHeading, newParagraph, newImage);
});
Live Demo!


Before() method


Content is inserted before the selected elements using the jQuery before() process.

On document ready, the following example will insert a paragraph before the container element, while on button press, it will insert an image before the <h1> element.



$(document).ready(function(){
  // Add content before an element with ID container
  $("#container").before("<p>— The Beginning —</p>");

  // Add content before headings
  $("button").click(function(){
    $("h1").before('<img src="images/marker-left.png" alt="Symbol">');
  });
});
Live Demo!


The after() method


The after() method of the jQuery library is used to inject content after the selected items.

On document ready, the following example will insert a paragraph after the container element, while on button press, it will insert an image after the <h1> element.



$(document).ready(function(){
  // Add content after an element with ID container
  $("#container").after("<p>— The End —</p>");

  // Add content after headings
  $("button").click(function(){
    $("h1").after('<img src="images/marker-right.png" alt="Symbol">');
  });
});
Live Demo!


Using the before() and after() methods, you can insert multiple elements.


Multiple arguments can be passed as input to the jQuery before() and after() functions. Before the <p> elements, the following example will insert a <h1>, <p>, and an <img> element.



$(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="https://picsum.photos/200" alt="Symbol">';
  $("p").before(newHeading, newParagraph, newImage);
});
Live Demo!


The wrap() method


Wrapping an HTML structure around selected elements is done with the jQuery wrap() process.

On document ready, the jQuery code in the following example wraps the container elements with a <div> element with the class.wrapper, thus wrapping all the inner content of the paragraph elements first with the <b> and then with the <em> element.



$(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>");
  });
});
Live Demo!