如何使用JavaScript dom新建,删除html元素实例详解
使用DOM可以新建HTML元素，也可以删除已有的HTML元素。
（一）新建元素：
<script>
//创建新的 <p> 元素
var newEle=document.createElement("p");
//创建文本节点
var node=document.createTextNode("这是使用Javascript创建的新段落。");
//将文本节点添加到新创建的 <p> 元素中
newEle.appendChild(node);
var p1_ele=document.getElementById("p1");
//将新创建的元素添加到已有的元素中
p1_ele.appendChild(newEle);
</script>（二）删除HTML元素
<script>
//删除一个元素时，必须首先获取到它的父元素
function deleteEle(){
var parent = document.getElementById("p_02");
var child = document.getElementById("p_02_p2");
parent.removeChild(child);
}
//使用代码获取元素的父元素
function deleteEle3(){
var child = document.getElementById("p_02_p3");
child.parentNode.removeChild(child);
}
</script>示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>Javascript 节点</title>
<head>
<style>
body {background-color:#e6e6e6}
</style>
</head>
<body>
<h3>（一）添加元素</h3>
<p id="p1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</p>
<script>
//创建新的 <p> 元素
var newEle=document.createElement("p");
//创建文本节点
var node=document.createTextNode("这是使用Javascript创建的新段落。");
//将文本节点添加到新创建的 <p> 元素中
newEle.appendChild(node);
var p1_ele=document.getElementById("p1");
//将新创建的元素添加到已有的元素中
p1_ele.appendChild(newEle);
</script>
<h3>（二）删除元素</h3>
<p id="p_02">
<p id="p_02_p1">这是一个段落</p>
<p id="p_02_p2">这是另一个段落</p>
<button onclick="deleteEle()">删除id为‘p_02_p2'的元素</button><br/>
<p id="p_02_p3">这是第三个段落</p>
<button onclick="deleteEle3()">删除id为‘p_02_p3'的元素（自动获取父元素）</button>
<script>
//删除一个元素时，必须首先获取到它的父元素
function deleteEle(){
var parent = document.getElementById("p_02");
var child = document.getElementById("p_02_p2");
parent.removeChild(child);
}
//使用代码获取元素的父元素
function deleteEle3(){
var child = document.getElementById("p_02_p3");
child.parentNode.removeChild(child);
}
</script>
</p>
</body>
</html>以上是如何使用JavaScript dom新建,删除html元素实例详解的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
小红书笔记怎么删除
Mar 21, 2024 pm 08:12 PM
小红书笔记怎么删除?在小红书APP中是可以编辑笔记的，多数的用户不知道小红书笔记如何的删除，接下来就是小编为用户带来的小红书笔记删除方法图文教程，感兴趣的用户快来一起看看吧！小红书使用教程小红书笔记怎么删除1、首先打开小红书APP进入到主页面，选择右下角【我】进入到专区;2、之后在我的专区，点击下图所示的笔记页面，选择要删除的笔记;3、进入到笔记页面，右上角【三个点】;4、最后下方会展开功能栏，点击【删除】即可完成。
微信拉黑再删除永久加不上是真的吗
Apr 08, 2024 am 11:41 AM
1、首先，拉黑再删除永久加不上是假的，拉黑删除后想要再加对方，只要对方同意即可。2、如果用户将某人拉黑，对方将无法向用户发送消息、查看用户的朋友圈以及与用户进行通话。3、拉黑并不意味着将对方从用户的微信联系人列表中删除。4、如果用户在拉黑后又将对方从用户的微信联系人列表中删除，那么在删除后是没有办法恢复的。5、如果用户想再次添加对方为好友，需要对方同意并重新添加用户。
found.000是什么文件夹？found.000文件夹可以删除吗？
Mar 13, 2024 pm 08:52 PM
日常使用电脑的过程中，可能会收到found.000文件丢失损坏的错误提示，这个found.000是什么文件夹？如果没有用的话，可以将其删除吗？既然有这么多人不认识这个文件，下面小编就来跟大家仔细说说found.000文件夹吧~ 一、found.000是什么文件夹 当电脑出现因非法关机导致的文件部分或全部丢失时，可以在位于系统分区中指定目录下找到名为“found.000”的特殊文件夹及其内部包含的以“.chk”为扩展名的文件。 这个“fo
小红书发布怎么删除？发布删除怎么恢复？
Mar 21, 2024 pm 05:10 PM
小红书作为一家流行的社交电商平台，吸引了大量用户分享生活点滴和购物心得。有时候我们可能会不经意发布一些不合适的内容，这时候需要及时删除，这样可以更好地维护个人形象或者遵守平台规定。一、小红书发布怎么删除？1.登录小红书账号，进入个人主页。2.在个人主页下方，找到“我的创作”选项，点击进入。3.在“我的创作”页面，你可以看到所有发布的内容，包括笔记、视频等。4.找到需要删除的内容，点击右侧的“...”按钮。5.在弹出的菜单中，选择“删除”选项。6.确认删除后，该条内容将从你的个人主页和公共页面消失
小红书把别人评论删了怎么找回？把别人评论删了会有显示吗？
Mar 21, 2024 pm 10:46 PM
小红书作为一款热门的社交电商平台，用户之间的互动评论是平台中不可或缺的交流方式。有时候，我们可能会发现自己的评论被其他人删除，这种情况可能会让我们感到困惑。一、小红书把别人评论删了怎么找回？当发现自己的评论被删除时，首先可以尝试在平台上直接搜索相关的帖子或商品，查看是否还能找到该评论。如果评论被删除后仍然显示，那么可能是被原帖主删除的，这时候可以尝试联系原帖主，询问其删除评论的原因，并请求恢复评论。如果评论已经被完全删除且无法在原帖上找到，那么在平台上恢复评论的机会相对较小。可以尝试使用其他途径
抖音聊天记录怎么彻底消除干净
May 07, 2024 am 11:14 AM
1、打开抖音app，点击界面底部的【消息】，点击需要删除的聊天对话入口。2、长按任意一条聊天记录，点击【多选】，勾选想要删除的聊天记录。3、点击右下角的【删除】按钮，在弹出的窗口中选择【确认删除】即可将这些记录永久删除。
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
微信文件传输助手怎么彻底删除_微信文件传输助手关闭方法介绍
Mar 20, 2024 pm 08:31 PM
微信的文件传输助手是每个用户都有的，一些用户将它当做成了备忘录，会记录一些东西。那么微信文件传输助手怎么彻底删除呢？下面就让小编为大家详细介绍一下吧。微信文件传输助手怎么彻底删除答案：【微信】-【长按文件传输助手】-【删除该聊天】。具体步骤：1、首先打开微信软件，进入到首页中后我们找到【文件传输助手】长按；2、然后会弹出标为未读、置顶该聊天、不显示该聊天、删除该聊天，在这里我们点击【删除该聊天】即可；
