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 相关文章推荐
JavaScript 三种创建对象的方法
Oct 16 Javascript
JavaScript 变量基础知识
Nov 07 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
JQuery实现动态表格点击按钮表格增加一行
Aug 24 Javascript
jQuery代码实现对话框右上角菜单带关闭×
May 03 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
vue mvvm数据响应实现
Nov 11 Javascript
vue如何使用rem适配
Feb 06 Vue.js
迅速了解一下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中array_merge与array+array的区别
2013/06/21 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
js字母大小写转换实现方法总结
2013/11/13 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
vue生命周期实例小结
2018/08/15 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
Python实现线程状态监测简单示例
2018/03/28 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
Python谱减法语音降噪实例
2019/12/18 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
保荐人的岗位职责
2013/11/19 职场文书
教育专业个人求职信
2013/12/02 职场文书
火车来了教学反思
2014/02/11 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
Go 语言中 20 个占位符的整理
2021/10/16 Golang
python和anaconda的区别
2022/05/06 Python
基于redis+lua进行限流的方法
2022/07/23 Redis