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 ul标签下拉菜单演示代码
Dec 11 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
easyui validatebox验证
Apr 29 Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
Node.JS如何实现JWT原理
Sep 18 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实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
php 数组元素快速去重
2017/05/05 PHP
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
在Django中限制已登录用户的访问的方法
2015/07/23 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
python实现趣味图片字符化
2019/04/30 Python
python日志logging模块使用方法分析
2019/05/23 Python
pycharm 安装JPype的教程
2019/08/08 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
python -v 报错问题的解决方法
2020/09/15 Python
详解pandas赋值失败问题解决
2020/11/29 Python
草莓网官网:StrawberryNET
2019/08/21 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
五年级科学教学反思
2014/02/05 职场文书
学校课外活动总结
2014/05/08 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL