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. Python GIL 系列之再谈Python的GIL

    1. 之前写过一篇<通过实例认识Python的GIL>的文章,感觉有些意犹未尽 2. 这次对例子作了些扩展,进一步的分析GIL对Python程序的影响 2.1 先来看例子: [python ...

  2. iOS 工程自动化 - OCLint

    前言 最近一直在做 iOS 工程自动化方向的事情,所以把自己研究和实践的内容进行记录并分享,希望能给大家一些帮助. 为什么要使用 OCLint 做为一个静态代码分析工具,我们引入 OCLint 的目的 ...

  3. Linux运维学习笔记-TCP三次握手和四次挥手

    TCP三次握手:     TCP四次挥手:

  4. pandas DataFrame 索引(iloc 与 loc 的区别)

    Pandas--ix vs loc vs iloc区别 0. DataFrame DataFrame 的构造主要依赖如下三个参数: data:表格数据: index:行索引: columns:列名: ...

  5. Android Gradle 理解

    /********************************************************************************* * Android Gradle ...

  6. Texas Instruments matrix-gui-2.0 hacking -- execute_command.sh

    #!/bin/sh #Copyright (C) Texas Instruments Incorporated - http://www.ti.com/ # # # Redistribution an ...

  7. Softmax回归介绍

    把输入值当成幂指数求值,再正则化这些结果值.这个幂运算表示,更大的证据对应更大的假设模型(hypothesis)里面的乘数权重值.反之,拥有更少的证据意味着在假设模型里面拥有更小的乘数系数.假设模型里 ...

  8. 本地和服务器(ubuntu)文件同步

    秘钥登录远端服务器 rsync -avze 'ssh -i ./id_rsa' root@remoteIp:/xx/remotefile.txt ./localpath (./id_rsa为本地秘钥路 ...

  9. Codeforces123E. Maze【树形dp】【概率dp】【证明题】

    LINK 题目大意 一棵树,上面的每个点都有一定概率成为起点和终点 从起点出发,随机游走,并按照下列规则统计count: DFS(x) if x == exit vertex then finish ...

  10. Vue中的“混合”——mixins使用方法

    混合是一种灵活的分布式复用 Vue 组件的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项.当组件和混合对象含有同名选项时,这些选项将以恰当的方式混 ...