hanyar HTML DOM Element appendChild()

taɓa da fassara da kuma ɗaukar amfani

appendChild() hanyar zaɗe nauyi ɗan ɗaya a ɗan ɗaya da ke ƙarshen.

kwanan:

hanyar insertBefore()

hanyar replaceChild()

hanyar removeChild()

hanyar remove()

hanyar childNodes

hanyar firstChild

hanyar lastChild

hanyar firstElementChild

hanyar lastElementChild

hanyar shafin da kama:

hanyar createElement()

hanyar createTextNode()

shafin

masanin 1

daga biki a biki a biki

const node = document.createElement("li");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);

daga kafin:

  • Coffee
  • Tea

daga bayan:

  • Coffee
  • Tea
  • Water

亲自试一试

masanin 2

daga dake a biki daga a biki

const node = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").appendChild(node);

移动之前：

  • Coffee
  • Tea

  • Water
  • Milk

移动之后：

  • Coffee
  • Tea
  • Milk

  • Water

亲自试一试

例子 3

创建带文本的段落：

  • 创建段落元素
  • 创建文本节点
  • 向段落追加文本节点
  • 向文档追加段落

创建一个 <p> 元素并将其追加到 <div> 元素：

const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);

亲自试一试

例子 4

创建一个 <p> 元素并将其追加到文档的正文中：

const para = document.createElement("P");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.body.appendChild(para);

亲自试一试

语法

element.appendChild(node)

或

node.appendChild(node)

参数

参数 描述
node 必需。要追加的节点。

返回值

类型 描述
节点 追加的节点。

浏览器支持

element.appendChild() 是 DOM Level 1 (1998) 特性。

所有浏览器都完全支持它：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持