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 支持 支持 支持 支持