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获取电脑分辨率的思路及操作
Nov 22 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
javascript 常用验证函数总结
Jun 28 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 Javascript
JS中的算法与数据结构之列表(List)实例详解
Aug 16 Javascript
JS原型对象操作实例分析
Jun 06 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 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
深入理解php的MySQL连接类
2013/06/07 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
浅谈PHP中的
2016/04/23 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
jquery 经典动画菜单效果代码
2010/01/26 Javascript
jquery ui resizable bug解决方法
2010/10/26 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
详解js删除数组中的指定元素
2018/10/31 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
在Python的循环体中使用else语句的方法
2015/03/30 Python
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
小区停车场管理制度
2014/01/27 职场文书
自我推荐信范文
2014/05/09 职场文书
考博专家推荐信
2014/05/10 职场文书
2014年财政所工作总结
2014/11/22 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
劳动仲裁调解书
2015/05/20 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书