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 相关文章推荐
javascript 通用简单的table选项卡实现
May 07 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
vue实现将一个数组内的相同数据进行合并
Nov 07 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
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
基于JQuery实现的Select级联
2014/01/27 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python中的id()函数指的什么
2017/10/17 Python
python生成ppt的方法
2018/06/07 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
Python魔法方法功能与用法简介
2019/04/04 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
网络体系结构及协议的定义
2014/03/13 面试题
个人求职简历中英文自我评价
2013/12/16 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL