javascript - InsertBefore无法在javascript中工作

我已经厌倦了insertBefore属性，它会抛出脚本错误，


  未捕获的DOMException：无法在“节点”上执行“ insertBefore”：要在其之前插入新节点的节点不是该节点的子节点。


下面我使用的代码。

            parent = document.getElementById(parentid[i]);
            before = document.getElementById(beforeid[i]);
            appenchild1 = document.getElementById(beforeid[i]);
            appenchild2 = document.getElementById(appenchild2id[i]);
            newnode = document.createElement("span");
            newnode.className = "verticalHparent" + btncls[i];
            newnode.style.display = "inherit";
            parent.insertBefore(newnode, before);

插入insertBefore方法时出错，有什么问题吗？

最佳答案

该错误消息是非常有解释性的。 before节点应为代码中parent节点的子节点。

这是一个工作示例（查看html结构）：

<div id = "parent">

    <div id = "child_1">child1</div>

</div>

<button onclick="createNewElement()">Create New Child</button>

<script type="text/javascript">

    function createNewElement(){

        var parent = document.getElementById("parent");
        var before = document.getElementById("child_0");

        var newnode = document.createElement("span");
        newnode.className = "verticalHparent";
        newnode.style.display = "inherit";
        newnode.innerHTML = "child2";
        parent.insertBefore(newnode, before);


    }


</script>

关于javascript - InsertBefore无法在javascript中工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42944031/