JavaScript 学习之路替换节点

个人笔记：

原来的样子：

后来的样子：

改变：标题由红框中移动至顶端。蓝盒子位置移动到，原来标题所在的位置。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试网页</title>
    <style type="text/css">
        div {
            margin: 1em;
        }

        #red {
            border: solid 1px red;
        }

        #blue {
            border: solid 1px blue;
        }
    </style>
</head>

<body>
    <div id="red">
        <h1>红盒子</h1>
        <p>红红火火恍恍惚惚</p>
        <div id="blue">蓝盒子</div>
    </div>

    <button id="ok">移动</button>
    <!--    javascript存放位置-->
    <script type="text/javascript" src="测试2_JavaScript.js"></script>
    <script type="text/javascript">

        /*var p = document.createElem ent("p");
        var txt = document.createTextNode("盒模型");
        p.appendChild(txt);
        document.getElementById("box").appendChild(p);*/
        var ok = document.getElementById("ok");//获取元素按钮的引用
        ok.onclick = function(){
            var red = document.getElementById("red");//获取红色盒子的引用
            var blue = document.getElementById("blue");//获取蓝色盒子的引用
            var h1 = document.getElementsByTagName("h1")[0];//获取h1标题的引用
            var del_h1 = red.replaceChild(blue,h1);//把红色表土替换成蓝色框，同时del_h1将标题存储
            red.parentNode.insertBefore(del_h1,red);//将标题移动至红色框前
        }
        
    </script>
</body>

</html>

十指流玉

发布了77 篇原创文章 · 获赞 7 · 访问量 9081

私信关注

JavaScript 学习之路 替换节点

个人笔记：

代码：

猜你喜欢

JavaScript 学习之路替换节点