JS实现添加,替换,删除节点元素的方法


Posted in Javascript onJune 30, 2016

本文实例讲述了JS实现添加,替换,删除节点元素的方法。分享给大家供大家参考,具体如下:

一直以来,对于节点操作比较纠结,特别是插入到某某节点之后.居然没有这个方法,以前的我写的方法有问题,是把新节点插入到旧节点的里面去了,还是该用insertBefore方法可以实现

下面是方法:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <!-- Created by TopStyle Pro Trial Version - www.bradsoft.com -->
 <title>page85删除替换插入</title> 
</head>
<body onload="insertMessageafter()">
 <p id="p1">Hello World</p>
</body>
</html>
<script>
 function removeMessage(){
 var op = document.getElementByIdx_x("p1");
 //document.body.removeChild(op);
 //op.parentNode返回父类节点
 op.parentNode.removeChild(op);
 }
 function replaceMessage(){
 var newop = document.createElement_x("p");
 newop.appendChild(document.createTextNode("Hello Java"));
 //alert(newop.innerHTML);
 var oldop = document.getElementByIdx_x("p1");
 //document.body.removeChild(op);
 //op.parentNode返回父类节点
 oldop.parentNode.replaceChild(newop,oldop);
 //document.body.replaceChild(newop,oldop)
 }
 function insertMessagebefore(){
 var newop = document.createElement_x("p");
 newop.appendChild(document.createTextNode("Hello Java"));
 var oldop = document.getElementByIdx_x("p1");
 oldop.parentNode.insertBefore(newop,oldop);
 }
 function insertMessageafter(){
 var newop = document.createElement_x("p");
 newop.appendChild(document.createTextNode("Hello Java"));
 var oldop = document.getElementByIdx_x("p1");
 insertafter(newop,oldop);
 }
 function insertbefore(newnode,oldnode){
 oldnode.parentNode.insertBefore(newnode,oldnode);
 }
 function insertafter(newnode,oldnode){
 //判断oldnode后面还有没有同类别的标记
  var nextnode = oldnode.nextSibling;
 if(nextnode){ //如果没有则为null,则为false,有的话就为true
  oldnode.parentNode.insertBefore(newnode,nextnode);
 }else{
  oldnode.parentNode.appendChild(newnode);
 }
 }
</script>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
pjblog中的UBBCode.js
Apr 25 Javascript
JS面向对象编程 for Cookie
Sep 19 Javascript
JavaScript格式化数字的函数代码
Nov 30 Javascript
jQuery focus和blur事件的应用详解
Jan 26 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
Vue制作Todo List网页
Apr 26 Javascript
浅谈React和Redux的连接react-redux
Dec 04 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
原生js实现自定义滚动条
Jan 20 Javascript
vue 自定义组件添加原生事件
Apr 21 Vue.js
JS传值出现中文参数乱码的解决方法
Jun 30 #Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 #Javascript
老生常谈 js中this的指向
Jun 30 #Javascript
JS使用cookie设置样式的方法
Jun 30 #Javascript
浅谈js和css内联外联注意事项
Jun 30 #Javascript
js传值后台中文出现乱码的解决方法
Jun 30 #Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 #Javascript
You might like
第九节 绑定 [9]
2006/10/09 PHP
php生成随机数或者字符串的代码
2008/09/05 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
js 函数的副作用分析
2011/08/23 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
jquery滚动到顶部底部代码
2015/04/20 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
巧用canvas
2017/01/21 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
Python yield 小结和实例
2014/04/25 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
python3中sys.argv的实例用法
2020/04/24 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
北京银河万佳Java面试题
2012/03/21 面试题
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
团员个人总结
2015/02/26 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
Node.js实现断点续传
2021/06/23 Javascript