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 相关文章推荐
Extjs中常用表单介绍与应用
Jun 07 Javascript
解读JavaScript中 For, While与递归的用法
May 07 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
angular中实现控制器之间传递参数的方式
Apr 24 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 Javascript
详解小程序循环require之坑
Mar 08 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
angularjs模态框的使用代码实例
Dec 20 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+MYSQL实现用户的增删改查
2015/03/24 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
Bootstrap框架安装使用详解
2017/01/21 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
Python创建临时文件和文件夹
2020/08/05 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
美术专业学生个人自我评价
2013/09/19 职场文书
高中考试作弊检讨书
2014/01/14 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
单位授权委托书范本
2014/09/26 职场文书
家长对孩子的寄语
2015/02/26 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
开展警示教育活动总结
2015/05/09 职场文书