JavaScript Element replaceChild() 方法

• 

  JavaScript Element replaceChild() 方法

  replaceChild()方法用新节点替换子节点。新节点可以是文档中的现有节点，也可以创建新节点。

  提示：使用removeChild()方法从元素中删除子节点。

  实例：

  使用新文本节点替换列表中<li>元素中的文本节点：

  // 创建一个名为“Water”的新文本节点
  var textnode = document.createTextNode("Water");
  
  // 获取<ul>元素的第一个子节点
  var item = document.getElementById("myList").childNodes[0];
  
  // 用新创建的文本节点替换<ul>的第一个子节点
  item.replaceChild(textnode, item.childNodes[0]);
  
  // 注意：此示例仅使用Text节点“Water”替换Text节点“Coffee”
  

  尝试一下
• 

  浏览器支持

  项	IE/Edge	Chrome	FireFox	Safari	Opera
  方法
  replaceChild()	支持	支持	支持	支持	支持

• 

  语法

  node.replaceChild(newnode, oldnode)
• 

  参数值

  参数	类型	描述
  newnode	Node object	必需的。 要插入的节点对象
  oldnode	Node object	必需的。 要删除的节点对象

• 

  技术细节

  项目	描述
  返回值：	Node对象，表示替换的节点
  DOM版本	Core Level 1

• 

  更多例子

  使用新的<li>元素替换列表中的<li>元素：

  // 创建一个新的<li>元素
  var elmnt = document.createElement("li");
  
  // 创建一个名为“Water”的新文本节点
  var textnode = document.createTextNode("Water");
  
  // 将文本节点附加到<li>
  elmnt.appendChild(textnode);
  
  // 获取id =“myList”的<ul>元素
  var item = document.getElementById("myList");
  
  // 使用新创建的<li>元素替换<ul>中的第一个子节点（<li> with index 0）
  item.replaceChild(elmnt, item.childNodes[0]);
  
  // 注意：此示例替换整个<li>元素
  

  尝试一下