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. 阿里云和微软共同开源的 OAM 对 Kubernetes 开发人员意味着什么?

    上周,微软和阿里巴巴共同推出了开放应用模型(OAM),用于定义部署在任何地方的应用模型的一种规范.Rudr是Microsoft基于Kubernetes环境的OAM标准实现. 我用了一个周末来了解OAM ...

  2. Python中Linux开发的技巧

    Python的Linux基础目录 操作系统  Windows和Linux的区别  常用基本命令1.操作系统 1 操作系统的作用:向上支持应用软件的运行,向下控制硬件,软件和硬件的过渡层Linux的版本 ...

  3. mysql如何解除死锁状态

    第一种: 1.查询是否锁表 show OPEN TABLES where In_use > 0; 2.查询进程(如果您有SUPER权限,您可以看到所有线程.否则,您只能看到您自己的线程) sho ...

  4. 前端技术之:通过plop生成Controller的方法与步骤

    # Controller的生成 开发者可以通过plop命令生成各种类型的控制器类(Normal.Restful.View), 以下是示例生成步骤. 1. 执行以下命令: plop controller ...

  5. 使用 HTML5 WebSocket 构建实时 Web 应用

    原文地址:http://www.ibm.com/developerworks/cn/web/1112_huangxa_websocket/ HTML5 WebSocket 简介和实战演练 本文主要介绍 ...

  6. 死磕 java线程系列之ForkJoinPool深入解析

    (手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本. 注:本文基于ForkJoinPool分治线程池类. 简介 随着在硬件上多核处理器的发展和广泛使用,并发编程成为 ...

  7. CSPS模拟 90

  8. 《STL源码剖析》——List

    List list位于头文件<<stl_list.h>>中 list是sequence containers中的一种 1 List的基本架构 list的基本结构的UML关系图如 ...

  9. python学习之【第八篇】:Python中的函数基础

    1.前言 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段.函数能提高应用的模块性,和代码的重复利用率. 2.函数的定义 定义函数时需要遵守以下规则: 函数代码块以 def 关键词开头 ...

  10. day 1 晚上 P2824 [HEOI2016/TJOI2016]排序 线段树

    #include<iostream> #include<cstdio> #include<cstdlib> #include<cmath> #inclu ...