jQuery Insert Content

<< Prev Next >>

We will learn how to insert new elements or contents to the document using jQuery.

jQuery Insert New Content

jQuery provides several methods that allows us to insert or add new content inside an existing elemen.

append() -Inserts content at the end of the selected elements
prepend() -Inserts content at the beginning of the selected elements
after() -Inserts content after the selected elements
before() -Inserts content before the selected elements

jQuery append() Method

The jQuery append() method inserts content AT THE END of the selected HTML elements.

Example

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

Try it Yourself

jQuery prepend() Method

The jQuery prepend() method inserts content to the beginning of the selected HTML elements.

Example

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

Try it Yourself

Add Several New Elements With append() and prepend()

In both examples above, we have only inserted some text/HTML at the beginning/end of the selected HTML elements.

However, both the append() and prepend() methods can take an infinite number of new elements as parameters. The new elements can be generated with text/HTML (like we have done in the examples above), with jQuery, or with JavaScript code and DOM elements.

In the following example, we create several new elements. The elements are created with text/HTML, jQuery, and JavaScript/DOM. Then we append the new elements to the text with the append() method (this would have worked for prepend() too) :

Example

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

Try it Yourself

jQuery after() and before() Methods

The jQuery after() method inserts content after the selected HTML elements. And before() method inserts content BEFORE the selected HTML elements.

Example

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

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

Try it Yourself

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>, and an <img> element before the elements.

Example

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

Try it Yourself

We will learn about remove in next chapter Click

<< Prev Next >>

jQuery Basic

jQuery Effects

jQuery manipulation

jQuery advanced

jQuery Exercises

jQuery References

jQuery Insert Content

jQuery Insert New Content

jQuery append() Method

Example

jQuery prepend() Method

Example

Add Several New Elements With append() and prepend()

Example

jQuery after() and before() Methods

Example

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

Example