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. Linux运维常用150个命令

    Linux运维常用150个命令 转载自:www.cnblogs.com/bananaaa/p/7774467.html 命令 功能说明 线上查询及帮助命令(2个) man 查看命令帮助,命令的词典,更 ...

  2. STM32 LSM6DSL 陀螺仪数据采集

    /************************************************************************************ * STM32 LSM6DS ...

  3. Samsung_tiny4412(驱动笔记07)----spinlock,semaphore,atomic,mutex,completion,interrupt

    /*********************************************************************************** * * spinlock,se ...

  4. dice 概率论 概率DP

    题目链接: http://acm.hdu.edu.cn/contests/contest_showproblem.php?pid=1010&cid=459 找出公式,公式有实际意义,某种情形当 ...

  5. Cassandra 数据库, python cqlsh命令

    ★  cql操作数据库(cqlsh.bat: python cqlsh命令操作<优缺点:https://blog.csdn.net/vbirdbest/article/details/77662 ...

  6. js操作链接url

    使用js对当前的URL进行操作,可以使用内置对象window.location: window.location有以下属性: window.location.href:取得当前地址栏中的完整URL,可 ...

  7. oracle 拆分字符串并转换为表

    使用函数的方式 1. 创建的函数以及类型如下: CREATE OR REPLACE TYPE str_split IS TABLE OF VARCHAR2 (4000);CREATE OR REPLA ...

  8. ThinkPHP 一直坚挺着

    ThinkPHP 一直坚挺着 从最初的 0.6 到现在的 5.2 ThinkPHP 走过了 12 年. 从 PHP 4 迭代到 PHP 7.3,每一次更新都给开源社区注入了活力. 这次国内开源软件的投 ...

  9. java 中一些需要注意的知识点

    java数组的length属性是容量,而不是数组真实元素的个数: 多线程中的interrupt()方法并不会终止处于"运行状态"的线程,它只是将线程的中断标记设为true. juc ...

  10. WPF ListView 简单的拖拽实现(转)

    首先设置ListView的AllowDrop=True:SelectionMode=Extended;并且ListView视图为GridVIew. private void listView1_Mou ...