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 相关文章推荐
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
Javascript实现单例模式
Jan 24 Javascript
js实现div在页面拖动效果
May 04 Javascript
VueJS全面解析
Nov 10 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 Javascript
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
PHP4与PHP5的时间格式问题
2008/02/17 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
yii操作session实例简介
2014/07/31 PHP
PHP实现事件机制实例分析
2015/06/26 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
switchery按钮的使用方法
2017/12/18 Javascript
React diff算法的实现示例
2018/04/20 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
深入理解javascript中的this
2021/02/08 Javascript
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
Python API len函数操作过程解析
2020/03/05 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
个人自我评价分享
2013/12/20 职场文书
售后服务承诺书
2014/03/26 职场文书
优秀班组长事迹
2014/05/31 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
Elasticsearch 索引操作和增删改查
2022/04/19 Python
TypeScript 内置高级类型编程示例
2022/09/23 Javascript