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);

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

  1. 替换元素节点replaceChild()

    替换元素节点replaceChild() replaceChild 实现子节点(对象)的替换.返回被替换对象的引用. 语法: node.replaceChild (newnode,oldnew ) 参 ...

  2. JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件

    JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删 ...

  3. jQuery之替换节点

    如果要替换节点,jQuery提供了两个方法:replaceWith()和replaceAll(). 两个方法的作用相同,只是操作颠倒了. 作用:将所有匹配的元素都替换成指定的HTML或者DOM元素.( ...

  4. jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法

    jQuery操作节点我们可以分六点来讲,查找节点.创建节点.插入节点.删除节点.替换节点.复制节点. 一.查找节点 text() - 设置或返回所选元素的文本内容   ,html() - 设置或返回所 ...

  5. 替换节点及replaceEach方法

    需求: 为所有的 li 节点添加 onclick 响应函数实现 city 子节点和 game 子节点对应位置的元素的互换 window.onload = function(){ //自定义互换两个节点 ...

  6. JQ 替换节点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jquery 替换节点实例

    描述: 要求用户选择一个自己不喜欢的商品 说明: 左边是商品列表,右面显示用户不喜欢的商品. 首先用选择器获得用户点击的元素,然后替换右面用户选择的不喜欢的商品. <!doctype html& ...

  8. [UE4]蓝图替换节点、引用快捷方式

  9. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

随机推荐

  1. MySql逻辑结构简介

    结构示意图: 如上图,可把数据库的结构分成四层,见下图及文字说明  一.连接层提供客户端和连接服务,包含本地Sock通信和大多数基于客户端/服务端工具实现的类似于TCP/IP的通信,主要完成一些类似于 ...

  2. Windows机器配置启动加载器的高级选项后,机器出现蓝屏,无法RDP

    问题描述: 虚拟机重启后出现蓝屏,需要排查原因 蓝屏界面如下: 排查结果: 1.Console发现机器停留在上述蓝屏界面,按F8后,机器可以正常启动并成功连接:但通过console再次重启后,又会进入 ...

  3. ElasticSearch中文分词器-IK分词器的使用

    IK分词器的使用 首先我们通过Postman发送GET请求查询分词效果 GET http://localhost:9200/_analyze { "text":"农业银行 ...

  4. 哪种方式更适合在React中获取数据?

    作者:Dmitri Pavlutin 译者:小维FE 原文:dmitripavlutin.com 国外文章,笔者采用意译的方式,以保证文章的可读性. 当执行像数据获取这样的I/O操作时,你必须发起获取 ...

  5. [考试反思]1106csp-s模拟测试103: 渺茫

    7点之前上不了博客,用gedit写的.谅解一下. 看起来不是特别惨?但是被sdfz爆踩了...而且其实并不能说“不是特别惨”吧90分算个啥啊?还凑不出个T2的AC难易度评估错误,T2是最简单的没看出来 ...

  6. [考试反思]0821NOIP模拟测试28:沉默

    这次不能把我前面的分数段都列出来了,因为实在太多了. 这次也不能把我后面的分数段列出来了,因为我后面没有了. yxm,mikufun,Pairs170100分第10.50分第29. 我:爆零,倒数第一 ...

  7. 【IOS开发—视图】

    一.UIWindow对象 每一个app都有一个UIWindow对象,它像一个容器一样,用来包含应用中的所有视图,应用会在启动时创建并设置UIWindow对象. - (BOOL)application: ...

  8. 原生JS实现栈结构

    1. 前言 栈,是一种遵从后进先出(LIFO,Later-In-First-Out)原则的有序集合.新添加的元素都保存在栈的一端,称作栈顶,另一端叫做栈底.在栈中,新元素都靠近栈顶,旧元素都靠近栈底. ...

  9. 二、安装JDK - Java软件的安装

    jdk是 Java 语言的软件开发工具包,主要用于移动设备.嵌入式设备上的java应用程序. 1.安装包的下载:http://pan.baidu.com/s/1mgh58ve (该安装包是绿色的,解压 ...

  10. jquery写$ document.getElementById效果

    jquery写$ document.getElementById效果<pre>document.getElementById('video-canvas')和$('#video-canva ...