DOM操作实例-优快云博客

本文链接：https://blog.youkuaiyun.com/Thumb_/article/details/122088394

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM-节点</title>
</head>
<body>
    <div id="div1">
        <p id="p1">第一个p</p>
        <p id="p2">第二个p</p>
    </div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM-节点</title>
</head>
<body>
    <div id="div1">
        <p id="p1">第一个p</p>
        <p id="p2">第二个p</p>
    </div>
    <script>
        var p = document.createElement("p");   //此时创建了<p></p>
        var word = document.createTextNode("新创建的p标签");   //新增的p标签

        p.appendChild(word);   //<p>新增的p标签</p>

        var div1 = document.getElementById("div1"); 
        div1.appendChild(p);
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM-节点</title>
</head>
<body>
    <div id="div1">
        <p id="p1">第一个p</p>
        <p id="p2">第二个p</p>
    </div>
    <script>
        var p = document.createElement("p");   //此时创建了<p></p>
        var word = document.createTextNode("新创建的p标签");   //新增的p标签

        p.appendChild(word);   //<p>新增的p标签</p>

        var div1 = document.getElementById("div1"); 
        div1.appendChild(p);

        var p1 = document.getElementById("p1");
        div1.removeChild(p1);

    </script>
</body>
</html>

在这里插入图片描述

JS：DOM-节点