JS添加或删除HTML dom元素的方法实例分析
作者:白杨-M 时间:2024-04-29 13:24:59
本文实例讲述了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);
希望本文所述对大家JavaScript程序设计有所帮助。
来源:https://www.cnblogs.com/baiyangyuanzi/p/6627530.html
标签:JS,HTML,dom元素
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
解析Tensorflow之MNIST的使用
2021-09-06 03:34:27
![](https://img.aspxhome.com/file/2023/9/76719_0s.jpg)
Python文件处理、os模块、glob模块
2023-03-03 17:27:16
Python Pandas学习之数据离散化与合并详解
2022-09-28 20:12:07
![](https://img.aspxhome.com/file/2023/3/128513_0s.png)
Django ORM F对象和Q对象查询
2023-10-23 15:33:04
![](https://img.aspxhome.com/file/2023/5/133845_0s.png)
php函数连续调用实例分析
2024-03-17 06:48:38
基于Python记录一场2023的烟花
2022-01-08 19:57:07
![](https://img.aspxhome.com/file/2023/1/109651_0s.png)
对Python之gzip文件读写的方法详解
2021-03-24 17:54:01
ElementUI的this.$notify.close()调用不起作用的解决
2024-05-09 09:53:16
![](https://img.aspxhome.com/file/2023/3/127163_0s.png)
Django 用户认证组件使用详解
2021-05-11 12:44:25
MySql树形结构(多级菜单)查询设计方案
2024-01-18 15:35:42
![](https://img.aspxhome.com/file/2023/4/116794_0s.png)
详解PHP如何更好的利用PHPstorm的自动提示
2024-05-22 10:05:30
Go语言压缩和解压缩tar.gz文件的方法
2024-05-21 10:21:46
对python:threading.Thread类的使用方法详解
2022-01-24 04:19:28
python生成验证码图片代码分享
2021-08-24 11:52:14
![](https://img.aspxhome.com/file/2023/0/118090_0s.png)
Python 数据清洗删除缺失值替换缺失值详情
2022-03-02 05:46:11
![](https://img.aspxhome.com/file/2023/7/83927_0s.png)
使用keras实现BiLSTM+CNN+CRF文字标记NER
2022-05-01 04:46:22
通过FSO进行页面计数
2008-11-27 16:02:00
利用不同样式改变相同xhtml结构的布局
2008-08-20 18:17:00
mysql存储过程之游标(DECLARE)原理与用法详解
2024-01-25 14:23:50
![](https://img.aspxhome.com/file/2023/4/99504_0s.png)
对acronym、abbr标签的理解
2008-05-29 13:03:00