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 浏览器判断实现函数
Aug 20 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
vue监听对象及对象属性问题
Aug 20 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
详解js中的原型,原型对象,原型链
Jul 16 Javascript
ES2020系列之空值合并运算符 '??'
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抓即时股票信息
2006/10/09 PHP
php中常用的预定义变量小结
2012/05/09 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
基于jquery的时间段实现代码
2012/08/02 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
vue利用axios来完成数据的交互
2018/03/23 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
Vue程序调试的方法
2019/06/17 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
python递归计算N!的方法
2015/05/05 Python
Python做文本按行去重的实现方法
2016/10/19 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
python3实现基于用户的协同过滤
2018/05/31 Python
将Python字符串生成PDF的实例代码详解
2019/05/17 Python
Python PIL库图片灰化处理
2020/04/07 Python
职高毕业生自我鉴定
2013/10/21 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
抗洪救灾标语
2014/10/08 职场文书
Python 图片添加美颜效果
2022/04/28 Python