dom insertAdjacentElement （4方向插入）

document.addEventListener("DOMContentLoaded", function () {
    var div = document.getElementById("d");
    var bt = document.getElementById("bt");
    bt.onclick = function (e) {
        //div.insertAdjacentElement("beforeBegin", document.createElement("p")); //div之前
        //div.insertAdjacentElement("afterBegin", document.createElement("p")); //div所有子元素之前
        //div.insertAdjacentElement("beforeEnd", document.createElement("p")); //div所有子元素之后
        //div.insertAdjacentElement("afterEnd", document.createElement("p")); //div之后
        //div.insertAdjacentHTML("beforeBegin", "<p>3</p><p>4</p>"); 
        //div.insertAdjacentHTML("afterBegin", "<p>3</p><p>4</p>"); 
        //div.insertAdjacentHTML("beforeEnd", "<p>3</p><p>4</p>"); 
        //div.insertAdjacentHTML("afterEnd", "<p>3</p><p>4</p>"); 
        //div.insertAdjacentText("beforeBegin", "the sky is mine"); 
        //div.insertAdjacentText("afterBegin", "the sky is mine"); 
        //div.insertAdjacentText("beforeEnd", "the sky is mine"); 
        //div.insertAdjacentText("afterEnd", "the sky is mine"); 
        //div.innerHTML = "<p>3</p><p>4</p>";
        //div.innerText = "<p>3</p><p>4</p>";//注意这两个效果不一样 这就是 text 和 html 的区别
        //div.appendChild(document.createElement("p")); //这个就等于上面第三个
        //div.insertBefore(document.createElement("p"),document.getElementsByTagName("p")[1]);//没什么卵用
    };

————————————————
版权声明：本文为CSDN博主「七八个星天怪」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/for_cxc/article/details/52062329