HTML DOM 元素 append()
示例
向 div 元素添加文本:
const div = document.getElementById("myDiv");
div.append("Hello! I am appended text.");亲自试一试 »示例
向 div 元素添加一个元素:
const div = document.getElementById("myDiv");
const h3 = document.createElement("h3");
div.append(h3);
h3.append("Hello! I am an appended h3");亲自试一试 »描述
append() 方法用于在元素的最后一个子元素之后添加一个或多个节点(元素)或字符串。
append() 方法和 appendChild() 方法的区别在于:
append()接受节点对象和字符串，而appendChild()只接受节点对象append()没有返回值，而appendChild()返回添加的节点对象append()允许添加多个项，而appendChild()只允许添加一个项
语法
element.append(param1, param2, ...)
参数
| 参数 | 描述 |
| param | 必填。要追加的一个或多个节点和字符串 |
返回值
None
浏览器支持
| 方法 | |||||
|---|---|---|---|---|---|
| append() | 54 | 17 | 49 | 10 | 41 |
更多示例
示例
向列表中添加多个列表项:
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);亲自试一试 »示例
将项目从一个列表移动到另一个列表:
const node = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").append(node);亲自试一试 »