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 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
JavaScript 实现模态对话框 源代码大全
May 02 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
JS控制FileUpload的上传文件类型实例代码
Oct 07 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
JavaScript创建对象的常用方式总结
Aug 10 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 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实现点击可刷新验证码
2015/11/07 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
基于jquery实现最简单的选项卡切换效果
2016/05/08 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
Python中将字典转换为列表的方法
2016/09/21 Python
用Python设计一个经典小游戏
2017/05/15 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
JS原生实现轮播图的几种方法
2021/03/23 Javascript
大学毕业感言200字
2014/03/09 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
圣诞节开幕词
2015/01/29 职场文书
车位出租协议书范本
2016/03/19 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python
Linux磁盘管理方法介绍
2022/06/01 Servers