jQuery adds elements

May 07, 2021 jQuery

1. jQuery - Add elements

2. Add new HTML content

3. jQuery append() method

4. jQuery prepend() method

5. Add a number of new elements through the append() and prepend() methods

6. jQuery after() and before() methods

7.. Instance

8.. Add several new elements through the after() and before() methods

9.. Instance

jQuery - Add elements

jQuery makes it easy to add new elements/content.

Add new HTML content

We'll learn four jQuery methods for adding new content:

append() - Insert the specified content at the end inside the selected element
Prepend() - Insert the specified 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.

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

Try it out . . .

jQuery prepend() method

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

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

Try it out . . .

Add a number of new elements through the append() and prepend() methods

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

However, the append() and prepend() methods can receive an unlimited number of new elements through parameters. You can generate text/HTML (as in the example above) with jQuery, or through JavaScript code and DOM elements.

In the following example, we create several new elements. T hese elements can be created by text/HTML, jQuery, or JavaScript/DOM. Then we append these new elements to the text via the append() method (as well as prepend():

function appendText()
{
var txt1="Text."; // 使用 HTML 标签创建文本
var txt2=$("").text("Text."); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
TXT3.INNNERHTML = "Text." // Create text with DOM Text with DOM
$ ("p"). Append (txt1, txt2, txt3); // Add new elements
}

Try it out . . .

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.

$ ("img"). after "Add Text Back");

$ ("img"). Before ("Add Text in front");

Try it out . . .

Add several new elements through the after() and before() methods

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

In the following example, we create several new elements. T hese elements can be created by text/HTML, jQuery, or JavaScript/DOM. Then we insert these new elements into the text by the after() method (which is equally valid for before():

function afterText()
{
var txt1="I "; // 使用 HTML 创建元素
var txt2=$("").text("love "); // 使用 jQuery 创建元素
Var txt3 = document.createElement ("BIG"); // Creating an element using DOM
txt3.innerHTML="jQuery!";
$ ("img"). after (txt1, txt2, txt3); // Add text after image
}

Try it out . . .

Tip: In jQuery, append/prepend is embedded inside the selection element, whileafter/before is appended outside the element.

jQuery adds elements

Table of contents

jQuery - Add elements

Add new HTML content

jQuery append() method

jQuery prepend() method

Add a number of new elements through the append() and prepend() methods

jQuery after() and before() methods

Add several new elements through the after() and before() methods

Cookie Consent