DOMContentLoaded DOMNodeInserted DOMNodeRemoved 加载添加删除 dom-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42374676/article/details/124799554


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="add()">Add</button>
    <button onclick="remove()">remove</button>

    <div class="controls">
        <button id="reload" type="button">Reload</button>
    </div>

    <div class="event-log">
        <label>Event log:</label>
        <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
    </div>
    <script>
        function add() {
            let odiv = document.createElement("div");
            odiv.style.width = "100px";
            odiv.style.height = "100px";
            odiv.style.background = "#f00";
            odiv.id = "odiv"
            document.body.appendChild(odiv);
        }
        function remove() {
            let odiv = document.getElementById("odiv");
            document.body.removeChild(odiv);
        }



        document.addEventListener("DOMContentLoaded", function () {
            console.log("DOMContentLoaded")
            document.addEventListener("DOMNodeInserted", function (e) {
                console.log("insert", e.target);
            });
            document.addEventListener("DOMNodeRemoved", function (e) {
                console.log("remove", e.target);
            });
            // var div = document.createElement("div");
            // div.innerHTML = "<span>span</span>";
            // console.log("%cinnerHTML", "color:red");
            // document.body.innerHTML = "<div><span>span</span></div>text";
            // console.log("%cinsertAdjacentHTML", "color:red");
            // document.body.insertAdjacentHTML("beforeend", "<div>div</div>");
            // console.log("%cappendChild", "color:red");
            // document.body.appendChild(div);
            // document.body.appendChild(div); //重复调用 appendChild
            // console.log("%cremoveChild", "color:blue");
            // document.body.removeChild(div);
            // console.log("%cinnerHTML", "color:blue");
            // document.body.innerHTML = "";
        });

        const log = document.querySelector('.event-log-contents');
        const reload = document.querySelector('#reload');

        reload.addEventListener('click', () => {
            log.textContent = '';
            window.setTimeout(() => {
                window.location.reload(true);
            }, 200);
        });

        window.addEventListener('load', (event) => {
            log.textContent = log.textContent + 'load\n';
        });

        document.addEventListener('readystatechange', (event) => {
            log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
        });

        document.addEventListener('DOMContentLoaded', (event) => {
            log.textContent = log.textContent + `DOMContentLoaded\n`;
        });


    </script>
</body>

</html>