jQuery Add

jQuery: Adding Elements and Content

jQuery makes it straightforward to dynamically add new HTML elements or content to the DOM.

Methods for Adding Content

Four primary methods allow you to insert content relative to selected elements:

• append(): Inserts content at the very end (as the last child) of each selected element.
• prepend(): Inserts content at the very beginning (as the first child) of each selected element.
• after(): Inserts content after (as the next sibling) each selected element.
• before(): Inserts content before (as the previous sibling) each selected element.

jQuery append() Method

Adds content inside the selected element(s), at the end.

// Appends text to the end of all paragraphs
$("p").append("** -- Appended Text**");

// Appends a new list item to a specific list
$("ul#my-list").append("<li>New Item</li>");

jQuery prepend() Method

Adds content inside the selected element(s), at the beginning.

// Prepends text to the beginning of all paragraphs
$("p").prepend("**Prepended Text -- **");

// Prepends a new list item to a specific list
$("ul#my-list").prepend("<li>First Item</li>");

Adding Multiple New Elements with append() and prepend()

Both append() and prepend() can accept multiple arguments, allowing you to add several new elements at once. These elements can be created as HTML strings, jQuery objects, or native DOM elements.

Example creating and appending/prepending various elements:

$(function() {
  function addItems() {
    // 1. Create element with HTML string
    const item1 = "<li>Item from HTML string</li>";

    // 2. Create element with jQuery
    const item2 = $("<li></li>").text("Item from jQuery object");

    // 3. Create element with native JavaScript DOM methods
    const item3 = document.createElement("li");
    item3.textContent = "Item from DOM element";

    // Append all new items to the list
    // Note: prepend(item1, item2, item3) would also work
    $("ul#my-list").append(item1, item2, item3);
  }

  // Example usage: Add items when a button is clicked
  $("#add-button").on('click', addItems);
});

Modern Practice: JavaScript Template Literals (backticks `) are often convenient for creating multi-line or complex HTML strings: const item =

${title}: ${description}

;

jQuery after() and before() Methods

These methods insert content outside the selected element(s), as siblings.

after() inserts content immediately following the selected element(s).

before() inserts content immediately preceding the selected element(s).

// Insert text after an image
$("img#logo").after("<p>Image caption</p>");

// Insert text before an image
$("img#logo").before("<h2>Logo Image:</h2>");

Adding Multiple New Elements With after() and before()

Similar to append() and prepend(), after() and before() can also accept multiple arguments (HTML strings, jQuery objects, DOM elements) to insert several new elements as siblings.

Example creating and inserting various elements after an image:

$(function() {
  function addContentAfterImage() {
    // 1. Create element with HTML string
    const text1 = "**Important: **";

    // 2. Create element with jQuery
    const text2 = $("<i></i>").text("Review the image details. ");

    // 3. Create element with native JavaScript DOM methods
    const text3 = document.createElement("span");
    text3.textContent = "(Last updated today)";
    text3.style.fontSize = 'small'; // Example of styling the DOM element

    // Insert the new elements after the image with id="product-image"
    // Note: before(text1, text2, text3) would insert them before the image
    $("img#product-image").after(text1, text2, text3);
  }

  // Example usage
  $("#add-details-button").on('click', addContentAfterImage);
});

jQuery HTML Manipulation Reference

For a complete overview of all jQuery methods for manipulating HTML and CSS, please consult the official jQuery documentation.