2023-07-20T15:19:08.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td{
            width:100px;
            height:40px;
        }

    </style>
</head>
<body>


    <div id="box">
        <p>这是段落1</p>
        <p id="p2">这是段落2</p>
        <p>这是段落3</p>
        <p>这是段落4</p>
        <p>这是段落5</p>
    </div>



    


<script>
function my$(id){return document.getElementById(id)};
//创建新节点
var div = document.createElement("div");
console.dir(div);

var cls = document.createAttribute("class");
console.dir(cls);

var txt = document.createTextNode("hello");
console.dir(txt);

var box = my$("box");
var p2 = my$("p2")

//box.appendChild(div);

//文本节点添加到新元素内部
//div.appendChild(txt);


//将p2从原节点删除，添加到新的指定位置
//box.appendChild(p2);




//替换节点
//div.appendChild(txt);
//box.replaceChild(div,p2);


div.appendChild(txt);
//子节点之前添加新子节点
box.insertBefore(div,p2);
//新子节点添加到尾部
box.insertBefore(div,null);







</script>


</body>
</html>