替换节点(replaceChild())

replaceChild():方法将把一个给定父元素里面的一个子节点替换为另一个子节点:

referencre = element.replaceChild(newChild,oldChild);

oldChild节点必须是element元素子节点,他的返回值是一个指向已经被替换的那个子节点的引用指针。

在下例中,id属性值是content的元素还包含着一个id属性值是fineprint的元素,我们将用createElement()方法创建一个新的文本元素,再用replaceChild()方法把fineprint元素替换为那个新创建元素:

var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.replaceChild(para,message);

如果被插入的元素本身还有子节点,则那些子节点也被插入到目标节点前。

replaceChild()方法也可以用文档树上的现有节点去替换另一个现有节点。如果newChild()节点时文档树上的一个现有节点,replaceChild()方法将先删除它字啊用它去替换oldChild()节点。

在下例中,replaceChild()方法将用id属性值是headline元素去替换content元素所包含的id属性值是fineprint的那个元素:

var container = document.getElement.ById("content");
var message = document.getElementById("fineprint");
var announcement = document.getElementById("headline");
container.replaceChild(announcement,message);
时间: 2024-11-06 20:58:57

替换节点(replaceChild())的相关文章

替换子节点replaceChild()

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

Unit03: 增加、删除和替换节点 、 常用 HTML DOM 对象

[创建和删除节点] 1.如何创建节点:(创建元素节点)3步: 1.先创建空元素对象: var newElem=document.createElement("标签名"); 2.设置必要属性: newElem.属性名="值"; newElem.innerHTML="文本"; 3.将新元素对象挂载到指定父元素下: - 追加:parent.appendChild(newElem); ***只有向已经存在页面中的元素追加新节点才会渲染: - 插入:par

JavaScript之DOM-5 增加、删除和替换节点(创建节点、插入节点、删除和替换节点)

一.创建节点 创建元素 - 使用如下方法可以创建一个新的元素节点: - document.createElement('元素名'); 创建文本节点 - 使用如下方法可以创建一个新的元素节点: - document.createTextNode('text'); 创建注释 - 使用如下方法可以创建一个HTML注释节点: - document.createComment('comment'); 创建文档片段 - 使用如下方法可以创建一个文档片段: - document.createDocumentF

克隆节点,替换节点

1.克隆节点介绍 2.替换节点 注意点:替换后的事件将不会存在 3.程序(克隆) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery-3.2.1.min.js">

替换元素节点replaceChild()

语法:node.replaceChild (newnode,oldnew ) 参数: newnode : 必需,用于替换 oldnew 的对象. oldnew : 必需,被 newnode 替换的对象. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title&g

替换节点

1.单点替换程序 这种效果可以看出,虽然被替换了,但是下面节点也没移动了. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript"> 7 window.onload=function(

jQuery DOM操作-复制节点、替换节点、包裹节点

clone(): 复制节点,默认无事件,如果传递了一个参数true,则表示在复制节点的同时复制元素中所绑定的事件. 1 <script type="text/javascript"> 2 $(function(){ 3 var $apple = $("ul li:eq(0)").clone(); 4 $("ul").append($apple); 5 }); 6 </script> replaceWith(): 将所有匹配

替换节点及replaceEach方法

需求: 为所有的 li 节点添加 onclick 响应函数实现 city 子节点和 game 子节点对应位置的元素的互换 window.onload = function(){ //自定义互换两个节点的函数 function replaceEach(aNode, bNode){ //1. 获取 aNode 和 bNode 的父节点. 使用 parentNode 属性 var aParent = aNode.parentNode; var bParent = bNode.parentNode; i

JavaScript DOM编程 学习笔记-替换节点

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function() { //测试replaceChild()方法 var bjNode = d