HTML DOM Element append()
Example
Append a text to a div:
const div = document.getElementById("myDiv");
div.append("Hello! I am
appended text.");
Try it Yourself »
Example
Append an element to a div:
const div = document.getElementById("myDiv");
const h3 =
document.createElement("h3");
div.append(h3);
h3.append("Hello! I am an
appended h3");
Try it Yourself »
More "Try it Yourself" examples below.
Description
The append() method is used to append one or several nodes (element)
or strings after the the last child of an element.
The difference between the append() and the
appendChild() method is:
append()accepts node objects and strings, whileappendChild()only accepts node objectsappend()has no return value, whileappendChild()return the appended node objectappend()allows to add multiple items, whileappendChild()allows only one item
Syntax
element.append(param1, param2, ...)
Parameters
| Parameter | Description |
| param | Required. One or several nodes and strings to append |
Return Value
None
More Examples
Example
Append several list items to a list:
const li = document.createElement("li");
const li2 = document.createElement("li");
const li3 = document.createElement("li");
li.append("Water");
li2.append("Juice");
li3.append("Wine");
// Append several "li" to
the list:
document.getElementById("myList").append(li, li2, li3);
Try it Yourself »
Example
Move an item from one list to another:
const node = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").append(node);
Try it Yourself »
Browser Support
| Method | |||||
|---|---|---|---|---|---|
| append() | 54 | 17 | 49 | 10 | 41 |
