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


Posted in Javascript onMarch 05, 2019

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码效果。

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

Javascript 相关文章推荐
JQuery index()方法使用代码
Jun 02 Javascript
本地对象Array的原型扩展实现代码
Dec 04 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
前端MVVM框架解析之双向绑定
Jan 24 Javascript
vue项目中导入swiper插件的方法
Jan 30 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
webpack4的迁移的使用方法
May 25 Javascript
Javascript获取某个月的天数
May 30 Javascript
vue+axios 前端实现的常用拦截的代码示例
Aug 23 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 #Javascript
es6数据变更同步到视图层的方法
Mar 04 #Javascript
使用webpack构建应用的方法步骤
Mar 04 #Javascript
详解element-ui中form验证杂记
Mar 04 #Javascript
JS使用数组实现的队列功能示例
Mar 04 #Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 #Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 #Javascript
You might like
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
Python3.x和Python2.x的区别介绍
2013/02/12 Python
Python运算符重载用法实例分析
2015/06/01 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
python实现Zabbix-API监控
2018/09/17 Python
python列表使用实现名字管理系统
2019/01/30 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
运动会四百米广播稿
2014/01/19 职场文书
李开复演讲稿
2014/05/24 职场文书
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA