replaceChild(a,b)是用来替换文档中的已有元素的
参数a:要插入的节点,
参数b:要替换的节点

var oDiv = document.getElementById("guoDiv");
var oSpan = document.createElement("span");
oSpan.innerHTML = "4";
var firsChild = oDiv.firstElementChild ? oDiv.firstElementChild : oDiv.firstChild
var returnNode = oDiv.replaceChild(oSpan, firsChild); //替换第一个元素,返回被替换掉的元素
alert(returnNode.innerHTML); //
var lastChild = oDiv.lastElementChild ? oDiv.lastElementChild : oDiv.lastChild;
oSpan = document.createElement("span");
oSpan.innerHTML = "5";
returnNode = oDiv.replaceChild(oSpan, lastChild); //替换最后一个,返回被替换掉的元素
alert(returnNode.innerHTML);//
<div id="guoDiv">
<span>1</span>
<span>2</span>
<span>3</span>
</div>

javascript节点操作replaceChild()的更多相关文章

  1. JavaScript 节点操作Dom属性和方法(转)

    JavaScript 节点操作Dom属性和方法   一些常用的dom属性和方法,列出来作为手册用. 属性:   1.Attributes 存储节点的属性列表(只读)   2.childNodes 存储 ...

  2. 【转】JavaScript 节点操作 以及DOMDocument属性和方法

    最近发现DOMDocument对象很重要,还有XMLHTTP也很重要 注意大小写一定不能弄错. 属性: 1Attributes 存储节点的属性列表(只读) 2childNodes 存储节点的子节点列表 ...

  3. JavaScript -- 节点操作, 事件触发, 表单伸缩

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

  4. javascript 节点操作拷贝节点cloneNode()

    cloneNode(a)方法接受一个布尔值参数,表示是否深拷贝 true:表示执行深拷贝,复制本节点以及整个子节点树. false:浅拷贝.只复制节点本身. 复制后返回的节点副本属于文档所有,但是并没 ...

  5. javascript节点操作appendChild()

    cloneNode(a)方法接受一个布尔值参数,表示是否深拷贝 true:表示执行深拷贝,复制本节点以及整个子节点树. false:浅拷贝.只复制节点本身. 复制后返回的节点副本属于文档所有,但是并没 ...

  6. javascript节点操作移出节点removeChild()

    removeChild(a)是用来删除文档中的已有元素 参数a:要移出的节点 <div id="guoDiv"> <span>1</span> ...

  7. javascript节点操作insertBefor()

    如果想要把节点放在某个特定的位置,而不是放在末尾,就可以使用insertBefore(a,b) 参数a:要插入的节点 参数b:作为参照的节点. var oDiv = document.getEleme ...

  8. JS节点操作(JS原生+JQuery)

    JavaScript与JQuery节点操作   节点关系与类型 任何HTML元素,都有nodeType属性.值有1~12,常用的有: 1.元素节点 2.文本节点 8.注释节点 9.document节点 ...

  9. javaScript之节点操作

    javaScript程序员避免不了要操作页面中的DOM,除了经常使用的: appendChild()向childNodes列表的末尾添加一个节点. insertBefore(),接受两个参数,要插入的 ...

随机推荐

  1. spring jdbc配置文件进行加密解密

    最近做一个项目,安全上有点要求,就是要对数据库相关的配置进行加密,配置文件如下: #加密前#datasource.type=mysql #datasource.driverClassName=com. ...

  2. Binary file to C array(bin2c)

    /******************************************************************************** * Binary file to C ...

  3. 【计算机视觉】如何使用于仕琪老师的libfacedetect人脸检测库

    前言 最近又开始进行人脸检测方向的内容,看到于仕琪老师的多角度检测想试一下,还不清楚原理,先测试效果如何. libfacedetect人脸检测库是深圳大学于仕琪老师发布的开源库,与opencv自带的人 ...

  4. convertTo函数

    前言 使用opencv常常会需要用到数据类型之间的转换,此时需要使用convertTo函数. 代码: cv::Mat samples; cv::Mat tdata; samples.convertTo ...

  5. google-protobuf安装详解

    前言 编译调试项目的过程中涉及到caffe的编译,提示没有安装protobuf的错误,本文详解protobuf的安装: 问题描述 解决步骤 1.查看google protobuf的github,没有直 ...

  6. 在python中的使用

    操作步骤: 1. 连接数据库,生成数据库连接对象 conn = pymongo.MongoClient('localhost',27017) 2. 选择要操作的数据库,生成数据库对象 (__setit ...

  7. stm32 DMA配置

    DMA就是将一个地址空间复制到另外一个地址空间.DMA传输方式无需CPU直接控制传输,也没有中断处理方式那样保留现场和恢复现场的过程,通过硬件为RAM与I/O设备直接传送数据,使CPU的效率大大的提高 ...

  8. 正则表达式matcher.group()用法

    本帖转自http://winter8.iteye.com/blog/1463244 group是针对()来说的,group(0)就是指的整个串,group(1) 指的是第一个括号里的东西,group( ...

  9. matplotlib的颜色及线条控制

    refer to: https://www.cnblogs.com/darkknightzh/p/6117528.html

  10. stenciljs 学习一 web 组件开发

    stenciljs 介绍参考官方网站,或者 https://www.cnblogs.com/rongfengliang/p/9706542.html 创建项目 使用脚手架工具 npm init ste ...