Jquery Add Together

jQuery - Add Elements

---

With jQuery, it is slow to add together novel elements/content.

---

Add New HTML Content

We volition expect at iv jQuery methods that are used to add together novel content:

• append() - Inserts content at the cease of the selected elements
• prepend() - Inserts content at the commencement of the selected elements
• after() - Inserts content later the selected elements
• before() - Inserts content earlier 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.");

---

jQuery prepend() Method

The jQuery prepend() method inserts content AT THE BEGINNING of the selected HTML elements.

Example

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

---

---

Add Several New Elements With append() in addition to prepend()

In both examples above, nosotros guide maintain solely inserted roughly text/HTML at the beginning/end of the selected HTML elements.
However, both the append() in addition to prepend() methods tin guide maintain an interplanetary space seat out of novel elements equally parameters. The novel elements tin last generated amongst text/HTML (like nosotros guide maintain done inwards the examples above), amongst jQuery, or amongst JavaScript code in addition to DOM elements.
In the next example, nosotros practise several novel elements. The elements are created amongst text/HTML, jQuery, in addition to JavaScript/DOM. Then nosotros append the novel elements to the text amongst the append() method (this would guide maintain worked for prepend() too) :

Example

function appendText() {
    var txt1 = "<p>Text.</p>";               // Create chemical ingredient amongst HTML      var txt2 = $("<p></p>").text("Text.");   // Create amongst jQuery     var txt3 = document.createElement("p");  // Create amongst DOM     txt3.innerHTML = "Text.";
    $("body").append(txt1, txt2, txt3);      // Append the novel elements }

---

jQuery after() in addition to before() Methods

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

Example

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

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

---

Add Several New Elements With after() in addition to before()

Also, both the after() in addition to before() methods tin guide maintain an interplanetary space seat out of novel elements equally parameters. The novel elements tin last generated amongst text/HTML (like nosotros guide maintain done inwards the instance above), amongst jQuery, or amongst JavaScript code in addition to DOM elements.
In the next example, nosotros practise several novel elements. The elements are created amongst text/HTML, jQuery, in addition to JavaScript/DOM. Then nosotros insert the novel elements to the text amongst the after() method (this would guide maintain worked for before() too) :

Example

function afterText() {
    var txt1 = "<b>I </b>";                    // Create chemical ingredient amongst HTML      var txt2 = $("<i></i>").text("love ");     // Create amongst jQuery     var txt3 = document.createElement("b");    // Create amongst DOM     txt3.innerHTML = "jQuery!";
    $("img").after(txt1, txt2, txt3);          // Insert novel elements later <img> }

---