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 相关文章推荐
JavaScript语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
jQuery 版元素拖拽原型代码
Apr 25 Javascript
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
微信小程序实现动态获取元素宽高的方法分析
Dec 10 Javascript
了解javascript中let和var及const关键字的区别
May 24 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
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 发送带附件邮件示例
2014/01/23 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
JS DOM 操作实现代码
2010/08/01 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
Python字符串格式化
2015/06/15 Python
详解python单例模式与metaclass
2016/01/15 Python
PyQt5实现简易电子词典
2019/06/25 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
联想英国官网:Lenovo英国
2019/07/17 全球购物
个人贷款收入证明
2014/10/26 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
MySQL 原理与优化之Update 优化
2022/08/14 MySQL