lovecoding
/
web0331


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <div class="first">
            <p>我是第一个盒子</p>
        </div>
        <ul class="list">
            <li>你好1</li>
            <li>你好2</li>
            <li>你好3</li>
            <li>你好4</li>
            <li>你好5</li>
        </ul>
    </div>
    <script>
        var box = document.getElementById("box");
        var first = document.querySelector(".first");
        var list = document.querySelector(".list")
        console.log(box.children);
        console.log(box.childNodes)
        box.childNodes[0].innerText = '你好'
        // box.childNodes[1].innerText = '我好'
        console.log(box.childNodes)
        // 创建节点
        var news = document.createElement("h1");
        console.log(news)
        news.innerText = '我才是第一个'
        console.log(news)
        // 将新节点插入到第一个前面
        box.insertBefore(news,first)
        // 创建一个无序列表 将列表放入到页面上
        var uls = document.createElement("ul"); 
        var li1 = document.createElement("li"); 
        var li2 = document.createElement("li"); 
        li1.innerHTML='第一个'
        li2.innerText='第二个'
        // 添加节点
        uls.appendChild(li1);
        uls.appendChild(li2);
        console.log(uls)
        box.appendChild(uls)
        // 删除节点
        box.removeChild(list)
        // 替换节点
        var other = document.createElement("h2")
        other.innerText = '这是最后的'
        box.replaceChild(other,uls)
        // 删除全部节点
        box.remove()
    </script>
</body>
</html>