创建和插入DOM节点

最新推荐文章于 2023-02-14 21:27:24 发布

原创最新推荐文章于 2023-02-14 21:27:24 发布

· 391 阅读

0 ·

版权

文章标签：

#javascript

JavaScript 专栏收录该内容

23 篇文章

订阅专栏

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

    <script>
      /*
      * 我们获得了某个DOM节点，假设这个DOM节点是空的，我们可以通过innerHTML就可以追加一个元素
      * 了，但是这个DOM节点已经存在元素了，我们就不能这么做！会报错*/

      //追加
        var js = document.getElementById("js");
        var list = document.getElementById("list");
        list.appendChild(js);

        //创建一个新的标签，实现插入
        //通过js创建一个新的标签
        var newP = document.createElement("p");//创建一个p标签
        newP.id = "newP";
        newP.innerText = "Hello Massimo";
        list.appendChild(newP);

        //创建一个标签节点（通过这个属性，可以设置任意的值）
        var myScript = document.createElement("script");
        myScript.setAttribute("type" , "text/javascript");
        list.appendChild(myScript);

        //创建一个style标签
        var myStyle = document.createElement("style");
        myStyle.setAttribute("type" , "text/css");
        myStyle.innerHTML = "body{background-color:chartreuse;}";
        document.getElementsByTagName("head")[0].appendChild(myStyle);

        //insert
        var p1 = document.createElement("p");
        p1.id = "p1";
        p1.innerText = "前端";
        var ee = document.getElementById("ee");
        list.insertBefore(p1,ee);

        
    </script>

</body>
</html>