JavaScript DOM节点操作实例小结(新建,删除HTML元素)

本文实例讲述了JavaScript DOM节点操作方法。分享给大家供大家参考，具体如下：

使用DOM可以新建HTML元素，也可以删除已有的HTML元素。

（一）新建元素：

<script>
  //创建新的 <p> 元素
  var newEle=document.createElement("p");
  //创建文本节点
  var node=document.createTextNode("这是使用Javascript创建的新段落。");
  //将文本节点添加到新创建的 <p> 元素中
  newEle.appendChild(node);
  var div1_ele=document.getElementById("div1");
  //将新创建的元素添加到已有的元素中
  div1_ele.appendChild(newEle);
</script>

（二）删除HTML元素

<script>
   //删除一个元素时，必须首先获取到它的父元素
   function deleteEle(){
    var parent = document.getElementById("div_02");
    var child = document.getElementById("div_02_p2");
    parent.removeChild(child);
   }
   //使用代码获取元素的父元素
   function deleteEle3(){
    var child = document.getElementById("div_02_p3");
    child.parentNode.removeChild(child);
   }
</script>

效果图：

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>Javascript 节点</title>
<head>
 <style>
  body {background-color:#e6e6e6}
 </style>
</head>
<body>
 <h3>（一）添加元素</h3>
 <div id="div1">
  <p id="p1">这是一个段落</p>
  <p id="p2">这是另一个段落</p>
 </div>
 <script>
  //创建新的 <p> 元素
  var newEle=document.createElement("p");
  //创建文本节点
  var node=document.createTextNode("这是使用Javascript创建的新段落。");
  //将文本节点添加到新创建的 <p> 元素中
  newEle.appendChild(node);
  var div1_ele=document.getElementById("div1");
  //将新创建的元素添加到已有的元素中
  div1_ele.appendChild(newEle);
 </script>
 <h3>（二）删除元素</h3>
 <div id="div_02">
  <p id="div_02_p1">这是一个段落</p>
  <p id="div_02_p2">这是另一个段落</p>
  <button onclick="deleteEle()">删除id为‘div_02_p2'的元素</button><br/>
  <p id="div_02_p3">这是第三个段落</p>
  <button onclick="deleteEle3()">删除id为‘div_02_p3'的元素（自动获取父元素）</button>
  <script>
   //删除一个元素时，必须首先获取到它的父元素
   function deleteEle(){
    var parent = document.getElementById("div_02");
    var child = document.getElementById("div_02_p2");
    parent.removeChild(child);
   }
   //使用代码获取元素的父元素
   function deleteEle3(){
    var child = document.getElementById("div_02_p3");
    child.parentNode.removeChild(child);
   }
  </script>
 </div>
</body>
</html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript替换操作技巧总结》、《javascript编码操作技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

赞 (0)

相关推荐

  • JavaScript中对DOM节点的访问、创建、修改、删除

    JavaScript中对DOM节点的访问、创建、修改、删除

    DOM DOM就是Document object Model的缩写.文档对象模型是把XML或HTML以树节点为表现形式的文档.用DOM方法和属性,你可以访问,修改,删除页面上任意一个元素,也是可以添加一个元素.DOM是独立于语言的API,可以被任意语言所实现,当然也包括了Javascript 看看下面的一个文本. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/

  • JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式（六）

    JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式（六）

    http://www.cnblogs.com/TomXu/archive/2012/02/16/2351331.html , 在回来看这里文章,你一定会有更深刻的认识.因为我在这里介绍概念上的东西比较少,看下面的例子,对初学的朋友可能会有些吃力! 1.DOM的架构 复制代码 代码如下: <html> <head> <title>document</title> </head> <body> <h1>CSS Demo<

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

    js removeChild() 用法 <body> <p id="p1">welcome to <b>javascript</b> world !</p> <script language="javascript" type="text/javascript"> <!-- function nodestatus(node) { var temp=""

  • javascript DOM操作之动态删除TABLE多行

    DOM动态删除TABLE多行 function $(objId){ return document.getElementById(objId); } function del_tbl(tblN,ckN){ var ck = document.getElementsByName(ckN); var tab = $(tblN); var rowIndex; for(var i=0;i 2 3 第一行 1 第二行 2 第三行 3 第四行 4 第五行 5 [Ctrl+A 全选 注:如需引入外部Js需刷新

  • 利用vue.js插入dom节点的方法

    本文主要介绍的是vue.js插入dom节点的方法,下面话不多说,来看看详细的介绍吧. html代码: <div id="app"></div> js代码: var MyComponent = Vue.extend({ template: '<div>Hello World</div>' }) var myAppendTo = Vue.extend({ template:'<p>appendTo</p>' }) va

  • JavaScript之DOM插入更新删除_动力节点Java学院整理

    JavaScript之DOM插入更新删除,供大家参考,具体内容如下 更新 拿到一个DOM节点后,我们可以对它进行更新. 可以直接修改节点的文本,方法有两种: 一种是修改innerHTML属性,这个方式非常强大,不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段修改DOM节点内部的子树: // 获取<p id="p-id">...</p> var p = document.getElementById('p-id'); // 设置文本为abc: p.

  • javascript 删除dom对象的事件函数代码

    JS添加/删除事件在IE和支持dom浏览器分别为:attachEvent(ie中的添加事件),detachEvent(ie中的删除事件),addEventListener(支持dom浏览器中的添加事件),removeEventListener(支持dom浏览器中的删除事件). 例如第一次点击黑色区域的时候弹出警告,并移除click事件,也就是第二次再点击的时候就没反应了,整合代码如下: 添加删除事件 var EventUtil=new Object; //oTarget:目标:sEventTyp

  • JavaScript DOM节点操作实例小结(新建,删除HTML元素)

    JavaScript DOM节点操作实例小结(新建,删除HTML元素)

    本文实例讲述了JavaScript DOM节点操作方法.分享给大家供大家参考,具体如下: 使用DOM可以新建HTML元素,也可以删除已有的HTML元素. (一)新建元素: <script> //创建新的 <p> 元素 var newEle=document.createElement("p"); //创建文本节点 var node=document.createTextNode("这是使用Javascript创建的新段落."); //将文本节

  • JavaScript学习笔记之DOM基础操作实例小结

    JavaScript学习笔记之DOM基础操作实例小结

    本文实例讲述了JavaScript DOM基础操作.分享给大家供大家参考,具体如下: 一.子节点 1.元素节点.文本节点 实例01 html <body> <ulid="ul1"> 文本节点1 <li></li> 文本节点2<li></li> 文本节点3<li></li> 文本节点4<li></li> 文本节点5<li></li> 文本节点6&

  • jQuery中DOM常见操作实例小结

    本文实例讲述了jQuery中DOM常见操作.分享给大家供大家参考,具体如下: DOM属性操作 属性列表 属性 版本 说明 attr() 1.0 设置或返回文档节点的属性. removeAttr() 1.0 移除文档节点的属性. prop() 1.6 设置或返回DOM元素的属性. removeProp() 1.6 移除每个匹配元素的属性. addClass() 1.0 添加CSS类名. removeClass() 1.0 移除CSS类名. toggleClass() 1.2 切换CSS类名(存在就

  • JavaScript时间日期操作实例小结【5个示例】

    JavaScript时间日期操作实例小结【5个示例】

    本文实例讲述了JavaScript时间日期操作.分享给大家供大家参考,具体如下: 本来想在网上找一些js实例来练练手,结果发现一本书<突破JavaScript编程实例五十讲>,看了下内容还不错,就下了下来: 后面又下了该书籍的源码,一看才发现这本书编的日期是2002年的,代码运行之后,有些代码可以运行,有些代码已经失效,原因是其所用的一些语言是已经淘汰的了. 其次就是由于是很早之前写的,那时候可能还没有css,js,html分离的想法,都是杂糅在一起的,看起来很不舒服. 还有就是,代码末尾都是

  • JS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】

    本文实例讲述了JS常见DOM节点操作.分享给大家供大家参考,具体如下: DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的文档对象模型. 节点:根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 1.整个文档时一个文档节点. 2.每个HTML元素是元素节点. 3.HTML元素内的文本是文本节点. 4.每个HTML属性是属

  • JQuery 选择器、DOM节点操作练习实例

    JQuery 选择器、DOM节点操作练习实例

    一.练习一 1.需求效果分析: 2.代码示例: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script s

  • Javascript的各种节点操作实例演示代码

    代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" http://www.w3.org/1999/xhtml"> <head> <title="

  • Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)

    Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)

    本文实例总结了Javascript DOM事件操作.分享给大家供大家参考,具体如下: 使用JavaScript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等. 效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l

  • JavaScript DOM节点操作方法总结

    JavaScript DOM节点操作方法总结

    节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进行增删改之前,首先要找到对应的元素.具体的查找方法如下: getElementByID() // 得到单个节点 getElementsByTagName() // 得到节点数组 NodeList getElementsByName() // 得到节点数组 NodeList 同时还可以利用元素节点的属性获取它的

  • JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支

    本文实例讲述了JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支.分享给大家供大家参考,具体如下: 页面加载事件的比较 window.onload jquery 中的 document.ready document.ready = function (callback) { // 兼容FF,Google if (document.addEventListener) { document.addEventListener('DOMContentLoaded', function

随机推荐