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 相关文章推荐
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
js密码强度校验
Nov 10 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
微信小程序多列选择器range-key使用详解
Mar 30 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 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
2006/12/13 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
PHP导入导出Excel代码
2015/07/07 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
document对象execCommand的command参数介绍
2006/08/01 Javascript
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
JS支持带x身份证号码验证函数
2008/08/10 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
layui中的switch开关实现方法
2019/09/03 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
python列表与元组详解实例
2013/11/01 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
如何基于Python实现数字类型转换
2020/02/07 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
华三通信H3C面试题
2015/05/15 面试题
平面设计师的工作职责
2013/11/21 职场文书
大学军训感言300字
2014/03/09 职场文书
五一劳动节活动记录
2014/03/23 职场文书
小学生家长寄语
2014/04/02 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
2014年老干部工作总结
2014/11/21 职场文书
档案工作个人总结
2015/03/03 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis