HTML DOM|元素增删改超级详细举例说明

最新推荐文章于 2022-08-02 11:08:37 发布

Alan_Lowe

最新推荐文章于 2022-08-02 11:08:37 发布

阅读量287

点赞数 4

分类专栏： # DOM 文章标签： dom

本文链接：https://blog.csdn.net/qq_45985728/article/details/119761529

版权

DOM 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML DOM|元素增删改

1.createElement()创建新的元素

如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建新元素</title>
  <script>
    function Fun(){
        // 新建一个p标签
        var x = document.createElement("p");
        // 新建一个文本
        var y = document.createTextNode("新的段落")
        // 将y插入到x中
        x.appendChild(y);
        // 将新建的标签插入到body的最后
        var z = document.body;
        z.appendChild(x);
    }
  </script>
</head>
<body>

<button onclick="Fun()">创建新的段落</button>
<p>第一个段落</p>
<p>第二个段落</p>

</body>
</html>

在这里插入图片描述

点击按钮就会新建一个p标签：

在这里插入图片描述

2.insertBefore()创建新的元素

上一个例子中的 appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加。如果想自定义位置，可以使用 insertBefore() 方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建新的元素</title>
  <script>
    function Fun(){
      var x = document.createElement("p");
      var y = document.createTextNode("新的段落");
      x.appendChild(y);
      var a = document.body;
      var b = a.firstChild;
      // 在body的第一个子节点前加入子节点
      a.insertBefore(x,b);
    }
  </script>
</head>
<body>

<p>第一个段落</p>
<p>第二个段落</p>
<button onclick="Fun()">创建新的段落</button>

</body>
</html>

在这里插入图片描述

这样操作就是在body的第一个子节点前新建一个节点了。

3.删除元素removeChild()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除已有元素</title>
  <script>
    function Fun(){
      var x = document.body;
      var y = document.getElementById("p1");
      // 删除body的第一个p标签节点
      x.removeChild(y);
    }
  </script>
</head>
<body>
<p id="p1">第一个段落</p>
<p>第二个段落</p>
<button onclick="Fun()">点击删除</button>

</body>
</html>

在这里插入图片描述

点击：

在这里插入图片描述

4.替换元素replaceChild()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>替换元素</title>
  <script>
    function Fun(){
      var x = document.body;
      var y = document.getElementById("p1");
      var a = document.createElement("p");
      var b = document.createTextNode("地球");
      a.appendChild(b);
      // 将x的y儿子替换为a
      x.replaceChild(a,y);
    }
  </script>
</head>
<body>

<button onclick="Fun()">点击替换</button>
<p id="p1">太阳</p>
<p>月亮</p>

</body>
</html>

在这里插入图片描述

点击后：

在这里插入图片描述

人生没有白走的路，每一步都算数！

Alan_Lowe

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
HTML DOM|元素增删改超级详细举例说明

HTML DOM|元素增删改1.createElement()创建新的元素如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>创建新元素</title> <script> function Fun(){
复制链接

扫一扫