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 相关文章推荐
动态表格Table类的实现
Aug 26 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
JS与C#编码解码
Dec 03 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
搞定immutable.js详细说明
May 02 Javascript
JS实现键值对遍历json数组功能示例
May 30 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
react高阶组件添加和删除props
Apr 26 Javascript
Vuex模块化应用实践示例
Feb 03 Javascript
vue-router 路由传参用法实例分析
Mar 06 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 curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
物业管理求职自荐信
2013/09/25 职场文书
普师专业个人自荐信范文
2013/11/26 职场文书
毕业生的求职信范文分享
2013/12/04 职场文书
内容编辑个人求职信
2013/12/10 职场文书
远程研修随笔感言
2014/02/10 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
网络编辑岗位职责
2014/03/18 职场文书
公司应聘求职信
2014/06/21 职场文书
MySQL时区造成时差问题
2022/04/13 MySQL
Java 定时任务技术趋势简介
2022/05/04 Java/Android