WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

jQuery - Add Elements


With jQuery, it is definitely not hard to incorporate new parts/content.


Add New HTML Content

We will take a gander at four jQuery techniques that are utilized to include new content:

  • append() - Inserts content toward the finish of the chose elements
  • prepend() - Inserts content toward the start of the chose elements
  • after() - Inserts content after the chose elements
  • before() - Inserts content before the chose elements

jQuery add() Method

The jQuery add() technique embeds content AT THE END of the chose HTML elements.

Example

$("p").append("Some attached text.");
Try it yourself »

jQuery prepend() Method

The jQuery prepend() technique embeds content AT THE BEGINNING of the chose HTML elements.

Example

$("p").prepend("Some prepended text.");
Try it yourself »

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

In the two models above, we have just embedded some content/HTML at the starting/end of the chose HTML elements.

However, both the annex() and prepend() techniques can take an endless number of new components as parameters. The new components can be created with content/HTML (like we have done in the precedents above), with jQuery, or with JavaScript code and DOM elements.

In the accompanying precedent, we make a few new components. The components are made with content/HTML, jQuery, and JavaScript/DOM. At that point we annex the new components to the content with the annex() strategy (this would have worked for prepend() as well) :

Example

work appendText() {
    var txt1 = "<p>Text.</p>";               /Create component with HTML 
    var txt2 = $("<p></p>").text("Text.");  /Create with jQuery
    var txt3 = document.createElement("p"); /Create with DOM
    txt3.innerHTML = "Text.";
    $("p").append(txt1, txt2, txt3);         /Append the new components
}
Try it yourself »

jQuery after() and previously() Methods

The jQuery after() strategy embeds content AFTER the chose HTML elements.

The jQuery previously() strategy embeds content BEFORE the chose HTML elements.

Example

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

$("img").before("Some content before");
Try it yourself »

Add Several New Elements With after() and before()

Also, both the after() and previously() strategies can take an interminable number of new components as parameters. The new components can be created with content/HTML (like we have done in the precedent above), with jQuery, or with JavaScript code and DOM elements.

In the accompanying precedent, we make a few new components. The components are made with content/HTML, jQuery, and JavaScript/DOM. At that point we embed the new components to the content with the after() technique (this would have worked for previously() as well) :

Example

work afterText() {
    var txt1 = "<b>I </b>";                    /Create component with HTML 
    var txt2 = $("<i></i>").text("love ");    /Create with jQuery
    var txt3 = document.createElement("b");   /Create with DOM
    txt3.innerHTML = "jQuery!";
    $("img").after(txt1, txt2, txt3);          /Insert new components after <img>
}
Try it yourself »