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 相关文章推荐
javascript高亮效果的二种实现方法
Sep 14 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
JavaScript中数据结构与算法(一):栈
Jun 19 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
es6函数之尾递归用法实例分析
Apr 25 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错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
微信小程序入门教程
2016/11/18 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
Python中实现switch功能实例解析
2018/01/11 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
python用700行代码实现http客户端
2021/01/14 Python
处理textarea中的换行和空格
2019/12/12 HTML / CSS
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
JAVA和C++区别都有哪些
2015/03/30 面试题
大学毕业生自我鉴定
2013/11/05 职场文书
社区学习十八大感想
2014/01/22 职场文书
项目建议书怎么写
2014/05/15 职场文书
本科毕业生自荐信
2014/05/26 职场文书
标准毕业生自荐信
2014/06/24 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL