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代码超级推荐
Apr 05 Javascript
JavaScript 学习笔记(十四) 正则表达式
Jan 22 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 Javascript
javascript回调函数的概念理解与用法分析
May 27 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
创建nuxt.js项目流程图解
Mar 13 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
实现“上一页”和“下一页按钮
2006/10/09 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
php实现微信支付之企业付款
2018/05/30 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
Python常用正则表达式符号浅析
2014/08/13 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
python编程线性回归代码示例
2017/12/07 Python
pytest中文文档之编写断言
2019/09/12 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
有关打架的检讨书
2014/01/25 职场文书
环保标语口号
2014/06/13 职场文书
党支部审查意见
2015/06/02 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
导游词之西递宏村
2019/12/10 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript