js操作DOM--添加、删除节点的简单实例


Posted in Javascript onJuly 08, 2016
js removeChild() 用法

<body> 
<p id="p1">welcome to <b>javascript</b> world !</p> 
<script language="javascript" type="text/javascript"> 
<!-- 
function nodestatus(node) 
{ 
 var temp=""; 
 if(node.nodeName!=null) 
 { 
  temp+="nodeName="+node.nodeName+"\n"; 
 } 
 else temp+="nodeName=null \n"; 
 if(node.nodeType!=null) 
 { 
  temp+="nodeType="+node.nodeType+"\n"; 
 } 
 else temp+="nodeType=null \n"; 
 if(node.nodeValue!=null) 
 { 
  temp+="nodeValue="+node.nodeValue+"\n"; 
 } 
 else temp+="nodeValue=null \n"; 
 return temp; 
} 
var parent=document.getElementById("p1"); 
var msg="父节点 \n"+nodestatus(parent)+"\n"; 
//返回元素节点p的最后一个孩子 
last=parent.lastChild; 
msg+="删除之前:lastChild--"+nodestatus(last)+"\n"; 
//删除节点p的最后一个孩子,变为b 
parent.removeChild(last); 
last=parent.lastChild; 
msg+="删除之后:lastChild--"+nodestatus(last)+"\n"; 
alert(msg); 
--> 
</script> 
</body>
<html>

<head>

<title>js控制添加、删除节点</title>

</head>
<script type="text/javascript">
  var all;
  function addParagraph() {
    all = document.getElementById("paragraphs").childNodes;
    var newElement = document.createElement("p");
    var seq = all.length + 1;
    
    //创建新属性
    var newAttr = document.createAttribute("id");
    newAttr.nodeValue = "p" + seq;
    newElement.setAttribute(newAttr);
    
    //创建文本内容
    var txtNode = document.createTextNode("段落" + seq);
    
    //添加节点
    newElement.appendChild(txtNode);
    document.getElementById("paragraphs").appendChild(newElement);
  }
  function delParagraph() {
    all = document.getElementById("paragraphs").childNodes;
    document.getElementById("paragraphs").removeChild(all[all.length -1]);
  }
</script>
<style>
  p{
    background-color : #e6e6e6 ;
  }
</style>
<body>
<center>
  <input type="button" value="添加节点" onclick="addParagraph();"/>
  <input type="button" value="删除节点" onclick="delParagraph();"/>
  <div id="paragraphs">
    <p id="p1">段落1</p>
    <p id="p2">段落2</p>
  </div>
</center>
</body>

</html>

以上这篇js操作DOM--添加、删除节点的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
jquery移动节点实例
Jan 14 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
JS删除数组指定值常用方法详解
Jun 04 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 Javascript
简单封装js的dom查询实例代码
Jul 08 #Javascript
JS选取DOM元素的简单方法
Jul 08 #Javascript
封装获取dom元素的简单实例
Jul 08 #Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 #Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 #Javascript
Augularjs-起步详解
Jul 08 #Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 #Javascript
You might like
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
python查找指定具有相同内容文件的方法
2015/06/28 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
Python的两道面试题
2013/06/29 面试题
小学中秋节活动方案
2014/02/06 职场文书
黄河象教学反思
2014/02/10 职场文书
合作意向书格式及范文
2014/03/31 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
律师函格式范本
2015/05/27 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL