HTML DOM Element replaceChild() పద్ధతి

నిర్వచనం మరియు వినియోగం

replaceChild() కొత్త నోడ్‌ను కలిగించి పిల్లలో నోడ్‌ను పునఃస్థాపించు పద్ధతి.

మరింత చూడండి:

removeChild() పద్ధతి

remove() పద్ధతి

appendChild() పద్ధతి

insertBefore() పద్ధతి

childNodes అంశం

firstChild అంశం

lastChild అంశం

firstElementChild అంశం

lastElementChild అంశం

సంబంధిత డాక్యుమెంటు పద్ధతులు:

createElement() పద్ధతి

createTextNode() పద్ధతి

ఉదాహరణ

ఉదాహరణ 1

కొత్త టెక్స్ట్ నోడ్ను <li> ఎలమెంట్‌లో టెక్స్ట్ నోడ్‌తో పునఃస్థాపించండి:

const newNode = document.createTextNode("Water");
const element = document.getElementById("myList").children[0];
element.replaceChild(newNode, element.childNodes[0]);

替换之前：

  • Coffee
  • Tea
  • Milk

替换之后：

  • Water
  • Tea
  • Milk

亲自试一试

ఉదాహరణ 2

用新的

  • 元素替换
  • 元素：

    // 创建一个新的 
  •  元素：
const element = document.createElement("li");
// 创建一个新的文本节点：
const textNode = document.createTextNode("Water");
// 将文本节点追加到 
  •  元素：
element.appendChild(textNode);
// 获取 id="myList" 的 
       元素：
const list = document.getElementById("myList");
// 用新的 
    •  元素替换第一个子节点：
list.replaceChild(element, list.childNodes[0]);

    • 替换之前：

    • Coffee
    • Tea
    • Milk

    替换之后：

    • Water
    • Tea
    • Milk

    亲自试一试

    • 语法

    node.replaceChild(newnode, oldnode)

    参数

    参数 描述
    newnode 必需。要插入的节点。
    oldnode 必需。要删除的节点。

    返回值

    类型 描述
    Node 对象 被替换的节点。

    浏览器支持

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

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

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