最新的Web开发教程
 

HTML DOM replaceChild() Method

<元素对象

在一个替换文本节点<li>与一个新的文本节点的列表元素:

// Create a new text node called "Water"
var textnode = document.createTextNode("Water");

// Get the first child node of an <ul> element
var item = document.getElementById("myList").childNodes[0];

// Replace the first child node of <ul> with the newly created text node
item.replaceChild(textnode, item.childNodes[0]);

// Note: This example replaces only the Text node "Coffee" with a Text node "Water"

在移除之前,

  • Coffee
  • Tea
  • Milk

取出后:

  • Water
  • Tea
  • Milk
试一试»

更多"Try it Yourself"下面的例子。


定义和用法

replaceChild()方法替换为新节点的子节点。

新节点可以在文档中已有的节点,也可以创建一个新的节点。

提示:使用removeChild()方法从一个元素中删除的子节点。


浏览器支持

方法
replaceChild()

句法

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

技术细节

返回值: 一个节点对象,代表取代节点
DOM版本 核心1级节点对象

例子

更多示例

替换一个<li>用新的元件列表中的<li>元素:

// Create a new <li> element
var elmnt = document.createElement("li");

// Create a new text node called "Water"
var textnode = document.createTextNode("Water");

// Append the text node to <li>
elmnt.appendChild(textnode);

// Get the <ul> element with id="myList"
var item = document.getElementById("myList");

// Replace the first child node (<li> with index 0) in <ul> with the newly created <li> element
item.replaceChild(elmnt, item.childNodes[0]);

// Note: This example replaces the entire <li> element

在移除之前,

  • Coffee
  • Tea
  • Milk

取出后:

  • Water
  • Tea
  • Milk
试一试»

<元素对象