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 相关文章推荐
jQuery 前的按键判断代码
Mar 19 Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
javascript中闭包概念与用法深入理解
Dec 15 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
原生js+css调节音量滑块
Jan 15 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 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 开发环境配置(Zend Studio)
2010/04/28 PHP
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
php实现的生成排列算法示例
2019/07/25 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
新手简单了解vue
2019/05/29 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
Python字符遍历的艺术
2008/09/06 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
Django学习笔记之ORM基础教程
2018/03/27 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
详解KMP算法以及python如何实现
2020/09/18 Python
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
同学聚会老师邀请函
2014/01/28 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
死亡证明书样本说明
2014/10/18 职场文书
教师节慰问信
2015/02/15 职场文书
军训阅兵新闻稿
2015/07/17 职场文书