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 相关文章推荐
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
js闭包实例汇总
Nov 09 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
基于zepto.js实现登录界面
Oct 09 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
JS实现网站吸顶条
Jan 08 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中in_array函数用法探究
2014/11/25 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
javascript写的一个链表实现代码
2009/10/25 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
python opencv之分水岭算法示例
2018/02/24 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
python新手学习使用库
2020/06/11 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
简历中自我评价范文3则
2013/12/14 职场文书
校三好学生主要事迹
2014/01/11 职场文书
办公室文员工作职责
2014/01/31 职场文书
大学生活动策划方案
2014/02/10 职场文书
高三学生评语大全
2014/04/25 职场文书
办理房产证委托书
2014/09/18 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
事业单位个人总结
2015/02/12 职场文书
英文慰问信范文
2015/03/24 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js