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 相关文章推荐
js 窗口抖动示例
Sep 04 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
深入探秘jquery瀑布流的实现
Jan 30 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
May 25 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
VUE前后端学习tab写法实例
Aug 06 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的memcached客户端memcached
2011/06/14 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
PHP实现文件上传与下载
2020/08/28 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
Python中的类与类型示例详解
2019/07/10 Python
详解python pandas 分组统计的方法
2019/07/30 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
python 简单的调用有道翻译
2020/11/25 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
遇到的Mysql的面试题
2014/06/29 面试题
商务日语毕业生自荐信范文
2013/11/14 职场文书
小学生作文评语大全
2014/04/21 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
公共场所禁烟标语
2014/06/25 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL