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实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
Mar 30 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 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中使用Oracle数据库(2)
2006/10/09 PHP
php基础教程 php内置函数实例教程
2012/08/21 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
php类自动加载器实现方法
2015/07/28 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
jquery实用代码片段集合
2010/08/12 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
python条件和循环的使用方法
2013/11/01 Python
Python解析最简单的验证码
2016/01/07 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
sort命令的作用和用法
2012/11/04 面试题
感恩的演讲稿
2014/05/06 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android