HTML DOM Element appendChild() 方法

定义和用法

appendChild() 方法将节点（元素）作为最后一个子元素添加到元素。

另请参阅：

insertBefore() 方法

replaceChild() 方法

removeChild() 方法

remove() 方法

childNodes 属性

firstChild 属性

lastChild 属性

firstElementChild 属性

lastElementChild 属性

相关的文档方法：

createElement() 方法

createTextNode() 方法

实例

例子 1

在列表中添加项目：

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

添加之前：

  • ਕਾਫੀ
  • ਚਾਹ

添加之后：

  • ਕਾਫੀ
  • ਚਾਹ
  • ਪਾਣੀ

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

例子 2

从一个列表向另一个列表中移动列表项：

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

ਹਟਾਉਣ ਤੋਂ ਪਹਿਲਾਂ:

  • ਕਾਫੀ
  • ਚਾਹ

  • ਪਾਣੀ
  • ਦੁੱਧ

ਹਟਾਉਣ ਤੋਂ ਬਾਅਦ:

  • ਕਾਫੀ
  • ਚਾਹ
  • ਦੁੱਧ

  • ਪਾਣੀ

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਉਦਾਹਰਣ 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) ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ。

ਸਾਰੇ ਬਰਾਉਜ਼ਰ ਇਸ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਕਰਦੇ ਹਨ:

ਚਰਮੋਨੇ ਆਈਈ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
ਚਰਮੋਨੇ ਆਈਈ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
ਸਮਰਥਨ 9-11 ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ