javaScript(JS)替换节点实现思路介绍


Posted in Javascript onApril 17, 2013
<title></title> 
<script type="text/javascript"> 
function createNode() { 
var pNode = document.createElement('p'); 
var tNode = document.createTextNode('烟花三月下杨州'); 
pNode.appendChild(tNode); 
document.body.appendChild(pNode); 
} 
function r() { 
var pNode = document.createElement('p'); 
var tNode = document.createTextNode('故人西辞黄鹤楼'); 
pNode.appendChild(tNode); 
//获取要替换的节点 
var reNode = document.getElementsByTagName('p')[0]; 
//这种方法只适用于IE浏览器 
//reNode.replaceNode(pNode, reNode); 
//适用于各种浏览器 
reNode.parentNode.replaceChild(pNode, reNode); 
} 
function reNode() { 
var oldNode = document.getElementsByTagName('p')[0]; 
//oldNode.parentNode返回的是p节点的父节点,这里就是body 
//然后使用body节点的removeChild方法删除下的oldNode节点 
oldNode.parentNode.removeChild(oldNode); 
} 
</script> 
</head> 
<body> 
<input id="Button1" type="button" value="创建节点" onclick="createNode()"/> 
<input id="Button2" type="button" value="替换节点" onclick="r()" /> 
<input id="Button3" type="button" value="删除节点" onclick="reNode()" /> 
</body> 
</html>
Javascript 相关文章推荐
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 #Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 #Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 #Javascript
js跑马灯代码(自写)
Apr 17 #Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 #Javascript
动态加载js和css(外部文件)
Apr 17 #Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 #Javascript
You might like
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
微信自定义分享php代码分析
2016/11/24 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
Jquery中dialog属性小记
2010/09/03 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
从vue源码看props的用法
2019/01/09 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
2020/05/13 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
入党申请自荐书范文
2014/02/11 职场文书
管理标语大全
2014/06/24 职场文书
药店采购员岗位职责
2014/09/30 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
地球一小时活动总结
2015/02/27 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
php修改word的实例方法
2021/11/17 PHP
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS