欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

insertAdjacentElement》在dom中插入的位置

程序员文章站 2024-03-24 11:16:28
...
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]);//没什么卵用
    };
相关标签: 网络运维