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. 【设计模式】 模式PK:工厂模式VS建造者模式

    1.概述 工厂方法模式注重的是整体对象的创建方法,而建造者模式注重的是部件构建的过程,旨在通过一步一步地精确构造创建出一个复杂的对象.我们举个简单例子来说明两者的差异,如要制造一个超人,如果使用工厂方 ...

  2. centos7系统初始化

    echo "# swappiness=0的时候表示最大限度使用物理内存,然后才是 swap空间" >> /etc/sysctl.conf echo -e "v ...

  3. [LeetCode&Python] Problem 832. Flipping an Image

    Given a binary matrix A, we want to flip the image horizontally, then invert it, and return the resu ...

  4. 很全面的WinRAR实用技巧系列 - imsoft.cnblogs

    WinRAR也可以管理我的桌面时间长了,桌面上堆的东西实在太多,平时该如何管理呢?安装了WinRAR的朋友可以请它来帮忙,用它管理清除无用的桌面文件或图标. 以XP系统为例,系统所在目录是“c:\wi ...

  5. 服务器购买+建站流程教程——适合新手没有经验的人Chinar总结

    服务器购买购买教程 本文提供全图文流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享.心创 ...

  6. Hihocoder1883 : 生成树问题(并查集+树剖+线段树)

    描述 有一个无向图,有n个点,m1条第一类边和m2条第二类边.第一类边有边权,第二类边无边权.请为第二类的每条边定义一个边权,使得第二类边可能全部出现在该无向图的最小生成树上,同时要求第二类边的边权总 ...

  7. 第三周作业3——Bug Report

    作业要求来自:https://edu.cnblogs.com/campus/nenu/SWE2017FALL/homework/957 要求1: 准备工作:利用老师提供的git 命令,批量pull所有 ...

  8. HDU 4666 最远曼哈顿距离

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4666 关于最远曼哈顿距离的介绍: http://blog.csdn.net/taozifish/ar ...

  9. CH4101 银河英雄传说

    题意 4101 银河英雄传说 0x40「数据结构进阶」例题 描述 公元五八○一年,地球居民迁移至金牛座α第二行星,在那里发表银河联邦创立宣言,同年改元为宇宙历元年,并开始向银河系深处拓展.  宇宙历七 ...

  10. test20180922 扭动的树

    题意 分析 二叉查找树按照键值排序的本质是中序遍历,每次我们可以在当前区间中提取出一个根,然后划分为两个子区间做区间DP.记\(f(i,j,k)\)表示区间[i, j]建子树,子树根节点的父亲是第k个 ...