JS添加或删除HTML dom元素的方法实例分析

本文实例讲述了JS添加或删除HTML dom元素的方法。分享给大家供大家参考，具体如下：

创建新的 HTML 元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>

这段代码创建新的<p> 元素：

var para=document.createElement("p");

如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：

var node=document.createTextNode("这是一个新段落。");

然后您必须向 <p> 元素追加这个文本节点：

para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。

这段代码找到一个已有的元素：

var element=document.getElementById("div1");

以下代码在已存在的元素后添加新元素：

element.appendChild(para);

删除已有的 HTML 元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

如果能够在不引用父元素的情况下删除某个元素，就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。

这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

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

赞 (0)

相关推荐

  • 原生JS实现循环Nodelist Dom列表的4种方式示例

    本文实例讲述了原生JS实现循环Nodelist Dom列表的4种方式.分享给大家供大家参考,具体如下: function $(id) { return document.getElementById(id); } var _PAGE = { timeListDom: $('timeList') }; var spanDoms = _PAGE.timeListDom.querySelectorAll('span'), domLen = spanDoms.length; // 第一种方式:原生for

  • JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例

    JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例

    本文实例讲述了JS实现DOM节点插入操作之子节点与兄弟节点插入操作.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS节点插入</title> <script> function showinsert(){ //添加子节点 var str=document.getElem

  • Javascript Dom元素获取和添加详解

    1.Dom元素的获取 document.getElementById():通过id获取一个Dom元素 document.getElementsByClassName():通过class名字获取一个或多个Dom元素(伪数组) document.getElementsByTagName():通过标签名字获取一个或多个Dom元素(伪数组) document.querySelector():获取指定 CSS 选择器的一个元素 document.querySelectorAll():获取指定 CSS 选择

  • JavaScript遍历DOM元素的常见方式示例

    JavaScript遍历DOM元素的常见方式示例

    本文实例讲述了JavaScript遍历DOM元素的常见方式.分享给大家供大家参考,具体如下: 对于元素之间的空格,IE9以及之前的版本不会返回文本节点,,其他的浏览器会返回文本节点,所以我们在使用firstChild,lastChild时会导致行为不一致. DOM中为元素新增了下面几个属性: childElementCount:返回子元素(不包括文本节点和注释)的数量: firstElementChild:firstChild的元素版: lastElementChild:lastChild的元素

  • JS中获取 DOM 元素的绝对位置实例详解

    在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

  • 在js代码拼接dom对象到页面上的模板总结

    每次在js代码里面想动态的拼个dom,然后append到页面上,都是各种麻烦, 要是可以直接在jsp页面弄个隐藏的model那是很好的,用js方法里面的clone方法也是很好的,还可以给不同部分set值. 为了以后简单点,我就把模板摆着,方便后面用得着的时候,复制粘贴. function fillDialog(dataArray) { var target = $("#dialogTarget"); target.empty(); for (var i = 0; i < data

  • JS实现DOM删除节点操作示例

    JS实现DOM删除节点操作示例

    本文实例讲述了JS实现DOM删除节点操作.分享给大家供大家参考,具体如下: 一 介绍 删除节点通过使用removeChild()方法来实现. removeChild()方法用来删除一个子节点. obj. removeChild(oldChild) oldChild:表示需要删除的节点. 二 应用 删除节点,本示例将通过DOM对象的removeChild()方法,动态删除页面中所选中的文本. 三 代码 <!DOCTYPE html> <html> <head> <t

  • 详解JS获取HTML DOM元素的8种方法

    什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.我们用JavaScript对网页进行的所有操作都是通过DOM进行的. 这篇文章不做深入研究,只把各种用法和坑做一个总结. JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getE

  • JS添加或删除HTML dom元素的方法实例分析

    本文实例讲述了JS添加或删除HTML dom元素的方法.分享给大家供大家参考,具体如下: 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. <div id="div1"> <p id="p1">这是一个段落.</p> <p id="p2">这是另一个段落.</p> </div> <scr

  • JS选取DOM元素常见操作方法实例分析

    本文实例讲述了JS选取DOM元素常见操作方法.分享给大家供大家参考,具体如下: JS选取DOM元素的方法 注意:原生JS选取DOM元素比使用jQuery类库选取要快很多 1.通过ID选取元素 document.getElementById('myid'); 2.通过CLASS选取元素 document.getElementsByClassName('myclass')[0]; 3.通过标签选取元素 document.getElementsByTagName('mydiv')[0]; 4.通过NA

  • JS两种类型的表单提交方法实例分析

    本文实例分析了JS两种类型的表单提交方法.分享给大家供大家参考,具体如下: 1.原始的 <form method="post" action="/student/stureg/add" id="form1" onsubmit="return subForm();"> <button type="submit" class="button red" style="

  • JS获取url参数、主域名的方法实例分析

    本文实例讲述了JS获取url参数.主域名的方法.分享给大家供大家参考,具体如下: <script> alert(location.hostname) alert(location.port) alert(location.pathname) alert(location.search) </script> <script> function winsx(url) //URL传递的参数 { var winurl =url?url:(unescape(window.loca

  • node.js express捕获全局异常的三种方法实例分析

    本文实例讲述了node.js express捕获全局异常的三种方法.分享给大家供大家参考,具体如下: 场景 express的路由里抛出异常后,全局中间件没办法捕获,需要在所有的路由函数里写try catch,这坑爹的逻辑让人每次都要多写n行代码 官方错误捕获中件间代码如下 app.use(function(err, req, res, next) { console.error(err.stack); res.status(500).send('Something broke!'); }); 测

  • JS动态创建DOM元素的方法

    本文实例讲述了JS动态创建DOM元素的方法.分享给大家供大家参考.具体如下: 近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /* 动态创建DOM元素的相关函数支持 */ /* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; }

  • js动态添加表格逐行添加、删除、遍历取值的实例代码

    js动态添加表格逐行添加、删除、遍历取值的实例代码

    关于js对表格进行逐行添加,今天抽空整理了一下:新建一个html文件(没有编辑器的可以新建一个demo.txt文件,然后改后缀名为demo.html),把下面代码全部贴进去即可. 功能包括:表格添加一行,表格删除一行,表格遍历取值等. 点击说明:点击添加按钮,则表格添加一行,可进行录入,删除按钮,可删除当前行,其他行不影响.删除或者添加,每行的的编号都会自动变化,套餐和价格是<input/>,内容是 <textarea></textarea>,点击保存按钮的时候,遍历表

  • 原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

    原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

    用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色,原来为红色: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • JS实现利用闭包判断Dom元素和滚动条的方向示例

    本文实例讲述了JS实现利用闭包判断Dom元素和滚动条的方向.分享给大家供大家参考,具体如下: 一.判断滚动条的方向,利用闭包首先保存滚动条的位置,然后当滚动时候不断更新滚动初始值,然后通过差指判断方向 function scroll(fn) { //利用闭包判断滚动条滚动的方向 var beforeScrollTop = document.body.scrollTop, fn = fn || function() {}; window.addEventListener("scroll"

  • 详解用JS添加和删除class类名

    详解用JS添加和删除class类名

    下面介绍一下如何给一个节点添加和删除class名 添加:节点.classList.add("类名"): 删除:节点.classList.remove("类名"): 以tab切换为例: 在写tab切换的时候,通常我们会给选中的tab设置不同的样式,常用的方法是给被选中的tab新增一个class名,然后改这个class名的样式. 比如 起一个class名叫"active" 设置样式 .active{ color: #FFD113 !important

随机推荐