JavaScript添加或删除HTML元素

最新推荐文章于 2024-07-28 02:06:02 发布

xfxf996

最新推荐文章于 2024-07-28 02:06:02 发布

阅读量243

点赞数

原文链接：https://www.cnblogs.com/halao/p/7677915.html

版权

本文转载自： https://www.cnblogs.com/halao/p/7677915.html 作者：halao 转载请注明该声明。

1.添加HTML元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<JavaScript添加或删除HTML元素.html' target='_self'>script>
var para=document.createElement("p");//创建新的<p> 元素
var node=document.createTextNode("这是一个新段落。");//创建文本节点,如果不再需要追加其他文本节点，也可以p1.innerHTML = "这是一个新段落。"

; para.appendChild(node);//向 <p> 元素追加这个文本节点 //向已有的元素追加这个新元素 var element=document.getElementById("div1"); element.appendChild(para); </script> </body> </html>

2.删除已有的 HTML 元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<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>

</body>
</html>

也可以使用 parentNode 属性来找到想要删除元素的父元素

var child=document.getElementById("p1"); child.parentNode.removeChild(child);

xfxf996

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫