jQuery — Add Elements

append()

Add content inside (at the end):

$("ul").append("<li>New item</li>");

appendTo()

$("<li>New item</li>").appendTo("ul");

prepend()

Add content inside (at the beginning):

$("ul").prepend("<li>First item</li>");

prependTo()

$("<li>First item</li>").prependTo("ul");

after()

Add content after the element:

$("p").after("<p>New paragraph</p>");

before()

Add content before the element:

$("p").before("<p>Previous paragraph</p>");

Insert Multiple Elements

$("ul").append("<li>A</li><li>B</li><li>C</li>");

Append Content from Variable

var newItem = $("<li>").text("Dynamic item");
$("ul").append(newItem);

Insertion Methods Summary

Method	Position
append()	Inside, at end
prepend()	Inside, at start
after()	After element
before()	Before element

Mini Practice

1. Append a new list item
2. Prepend a heading to a section
3. Add an element after another
4. Create and append an element dynamically

Up Next

Continue with Remove Elements — deleting content from the DOM.