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. 那些年,追寻JMeter的足迹,免费送……

    ​我们测试技术部武汉团队自16年引入jmeter以来,利用jmeter做了很多事情.首先运用jmeter进行接口测试,后续实现jmeter自动化冒烟测试,顺带也实现了线上环境的巡检,节省了大量人力.j ...

  2. Samsung_tiny4412(驱动笔记08)----jiffies,timer,kthread,workqueue,tasklet

    /*********************************************************************************** * * jiffies,tim ...

  3. OLED的相关信息

    有2种方式与OLED模块相连接,一种是8080的并口方式,另一种是4线SPI方式. ALIENTEK OLED 模块的 8080 接口方式需要如下一些信号线:CS: OLED 片选信号.WR:向 OL ...

  4. 理解cookie和session技术

    一.HTTP协议的无状态性 WEB应用程序使用的是HTTP协议传输数据的,HTTP协议是一个无状态的协议,这次数据传输完毕,客户端会和服务端断开连接,再次传输数据就需要重新建立新的连接,这也就无法会话 ...

  5. 红黑树-算法大神的博客-以及java多线程酷炫的知识

    http://www.cnblogs.com/skywang12345/p/3245399.html 解释第5条:从 ->根节点(或者任意个结点)到->所有的末端节点的路径中 ->黑 ...

  6. 进程间通信--POSIX消息队列

    相关函数: mqd_t mq_open(const char *name, int oflag); mqd_t mq_send(mqd_t mqdes, const char *msg_ptr, si ...

  7. MySQL--常见ALTER TABLE 操作

    ##================================## ## 修改表的存储引擎 ## SHOW TABLE STATUS LIKE 'TB_001' \G; ALTER TABLE ...

  8. 使用npm init快速创建web 应用

    一般来说我们会有npm init -y 快速生成package.json 文件, 但是npm init 可以使用脚手架工具,生成项目,比较方便 参考 npm init 帮助命令 npm init [- ...

  9. vsto excel 任务窗体操作

    1. 开发环境visual studio 2010 2. office 2007 代码: 1.任务窗体 代码: partial class ActionsPaneControl1 : UserCont ...

  10. Codelf 变量取名

    Codelf 变量取名 可以看到别的变量是怎么命名的,站在巨人的肩膀上.