YouTip

## jQuery append() Method The `append()` method is a built-in jQuery function used to insert specified content at the end (inside) of the selected elements. While it inserts content *inside* the target element as its last child, if you need to insert content at the very beginning of the selected elements, use the [prepend()](html-prepend.html) method instead. --- ## Syntax The `append()` method supports two primary signatures: ```javascript $(selector).append(content1, [content2, ..., contentN]) ``` Or using a callback function: ```javascript $(selector).append(function(index, currentHtml)) ``` ### Parameter Values | Parameter | Type | Description | | :--- | :--- | :--- | | `content` | HTML string, Element, Text, Array, or jQuery object | **Required.** Specifies the content to insert at the end of the selected elements. You can pass multiple arguments to append multiple elements at once. | | `function(index, currentHtml)` | Function | **Optional.** A callback function that returns the content to insert.

• `index` - The index position of the element in the set.
• `currentHtml` - The current inner HTML of the selected element.

| --- ## Code Examples ### Example 1: Appending Simple Text and HTML Elements The following example demonstrates how to append a bold text fragment to all `

` elements, and how to append a new list item (`

`) to an ordered list (`

`). ```javascript $(document).ready(function(){ // Append bold text to the end of all paragraph elements $("#btn1").click(function(){ $("p").append(" ."); }); // Append a new list item to the end of the ordered list $("#btn2").click(function(){ $("ol").append("
1. New List Item
"); }); }); ``` ### Example 2: Appending Content Created via HTML, jQuery, and DOM The `append()` method can accept multiple new elements created in different ways (as HTML strings, DOM elements, or jQuery objects) and append them in a single call. ```javascript function appendContent() { // 1. Create content using HTML var txt1 = "

Text created with HTML.

"; // 2. Create content using jQuery var txt2 = $("
").text("Text created with jQuery."); // 3. Create content using the DOM var txt3 = document.createElement("p"); txt3.innerHTML = "Text created with DOM."; // Append all three new elements to the body $("body").append(txt1, txt2, txt3); } ``` ### Example 3: Appending Content Using a Callback Function You can use a callback function to dynamically generate and append content based on the element's index and its existing HTML structure. ```javascript $(document).ready(function(){ $("button").click(function(){ $("p").append(function(n, origText){ return " (Appended index: " + n + ")"; }); }); }); ``` --- ## Key Considerations 1. **`append()` vs `appendTo()`**: * `$(selector).append(content)` inserts the content inside the selected element(s). * `$(content).appendTo(selector)` does the same job, but the syntax is reversed: the content comes first, followed by the target selector. 2. **Moving Existing Elements**: If you select an existing element on the page and append it to another element, it will be *moved* from its original position to the new position, rather than cloned. If you want to copy it instead, use the `.clone()` method first (e.g., `$(selector).append($('#element-to-copy').clone())`).