javascript替换已有元素replaceChild()使用介绍


Posted in Javascript onApril 03, 2014

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); //1 
var lastChild = oDiv.lastElementChild ? oDiv.lastElementChild : oDiv.lastChild; 
oSpan = document.createElement("span"); 
oSpan.innerHTML = "5"; 
returnNode = oDiv.replaceChild(oSpan, lastChild); //替换最后一个,返回被替换掉的元素 
alert(returnNode.innerHTML);//3

<div id="guoDiv"> 
<span>1</span> 
<span>2</span> 
<span>3</span> 
</div>
Javascript 相关文章推荐
JS日历 推荐
Dec 03 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
jquery对表单操作2
Apr 06 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
layui 表格的属性的显示转换方法
Aug 14 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
Oct 18 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 Javascript
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 #Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 #Javascript
单击和双击事件的冲突处理示例代码
Apr 03 #Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 #Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 #Javascript
JS获取网页属性包括宽、高等等
Apr 03 #Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 #Javascript
You might like
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
php实现读取超大文件的方法
2014/07/28 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
php中错误处理操作实例分析
2019/08/23 PHP
javascript 面向对象编程基础 多态
2009/08/21 Javascript
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
Python如何省略括号方法详解
2020/03/21 Python
python爬虫如何解决图片验证码
2021/02/14 Python
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
Footshop法国:购买运动鞋
2020/01/19 全球购物
高中开学感言
2015/08/01 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫