jQuery add elements

With jQuery, it is easy to add new elements/content.

Add new HTML content

We will learn about four jQuery methods used to add new content:

  • append() - Insert content at the end of the selected element
  • prepend() - Insert content at the beginning of the selected element
  • after() - Insert content after the selected element
  • before() - Insert content before the selected element

jQuery append() method

The jQuery append() method inserts content at the end of the selected element.

Example

$("p").append("Some appended text.");

Try It Yourself

jQuery prepend() method

The jQuery prepend() method inserts content at the beginning of the selected element.

Example

$("p").prepend("Some prepended text.");

Try It Yourself

Adding multiple new elements using append() and prepend() methods

In the above example, we only insert text/HTML at the beginning/end of the selected element.

However, the append() and prepend() methods can accept an unlimited number of new elements as parameters. Text/HTML can be generated using jQuery (as shown in the example above), or through JavaScript code and DOM elements.

In the following example, we create several new elements. These elements can be created by text/HTML, jQuery, or JavaScript/DOM. Then we append these new elements to the text using the append() method (prepend() works the same way):

Example

function appendText()
{
var txt1="<p>Text.</p>";               // Create a new element using HTML
var txt2=$("<p></p>").text("Text.");   // Create a new element using jQuery
var txt3=document.createElement("p");  // Create new element through DOM
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // Append new elements
{}

Try It Yourself

jQuery after() and before() methods

The jQuery after() method inserts content after the selected element.

The jQuery before() method inserts content before the selected element.

Example

$("img").after("Some text after");
$("img").before("Some text before");

Try It Yourself

Adding several new elements through after() and before() methods

The after() and before() methods can accept an unlimited number of new elements as parameters. New elements can be created by text/HTML, jQuery, or JavaScript/DOM.

In the following example, we create several new elements. These elements can be created by text/HTML, jQuery, or JavaScript/DOM. Then we insert these new elements into the text using the after() method (the same is true for before() method):

Example

function afterText()
{
var txt1="<b>I </b>";                    // Create new element with HTML
var txt2=$("<i></i>").text("love ");     // Create new element through jQuery
var txt3=document.createElement("big");  // Create new element through DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // Insert new elements after img
{}

Try It Yourself

jQuery HTML Reference Manual

For the complete content of jQuery HTML methods, please visit the following reference manual: