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 相关文章推荐
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
JavaScript实现世界各地时间显示
Sep 07 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 远程图片保存到本地的函数类
2008/12/08 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
详解php用static方法的原因
2018/09/12 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
Python监控主机是否存活并以邮件报警
2015/09/22 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
Python中格式化format()方法详解
2017/04/01 Python
python分割列表(list)的方法示例
2017/05/07 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
教师求职推荐信范文
2013/11/20 职场文书
导游个人求职信范文
2014/03/23 职场文书
实习单位评语
2014/04/26 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js