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 相关文章推荐
IE7提供XMLHttpRequest对象为兼容
Mar 08 Javascript
javascript 定义新对象方法
Feb 20 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
Javascript中Array.prototype.map()详解
Oct 22 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
vue模式history下在iis中配置流程
Apr 17 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 验证码制作(网树注释思想)
2009/07/20 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
python搭建微信公众平台
2016/02/09 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
python机器学习之随机森林(七)
2018/03/26 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
python 串行执行和并行执行实例
2020/04/30 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
出纳员岗位职责
2014/03/13 职场文书
运动员口号
2014/06/09 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
单位接收证明格式
2015/06/18 职场文书
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android