如何用JavaScript在HTML DOM中将新增div插入到+按钮前

你不需要修改现有HTML结构，JavaScript原生提供了两种常用方法可以直接将新元素插入到+按钮之前，无需调整布局代码：

方法1：兼容全浏览器的insertBefore #

这是标准DOM操作API，兼容所有主流浏览器包括老版本IE：

// 父元素.insertBefore(待插入新元素, 参考元素)
divcontainer.insertBefore(newdiv, btnadd);

方法2：更简洁的现代API before() #

如果无需兼容IE浏览器，可以直接在参考元素上调用before()方法，代码更易读：

btnadd.before(newdiv);

完整修改后的JS代码 #

const btnadd = document.querySelector(".btn-add");
const divcontainer = document.getElementById("div-container")

let divcounter = 0;

btnadd.addEventListener("click", addNew);

function addNew() {
    if (divcounter < 10){
        const newdiv = document.createElement("div");
        newdiv.classList.add("div-shadow");
        // 两种方法二选一即可，这里用insertBefore做兼容示例
        divcontainer.insertBefore(newdiv, btnadd);
        divcounter++;
    }
}

布局适配说明 #

你现有CSS Grid代码无需做任何调整：Grid默认按照DOM节点的先后顺序排列子元素，修改后新增的div永远在按钮的DOM节点之前，所以渲染时按钮会自动排在所有新增div的后方，完全符合你的需求。

内容的提问来源于stack exchange，提问作者V. H.