InsertBefore 不能在 javascript 中工作答案

【问题标题】：InsertBefore not working in javascriptInsertBefore 不能在 javascript 中工作
【发布时间】：2017-03-22 14:24:12
【问题描述】：

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

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

下面是我使用的代码。

            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 方法抛出错误，有什么问题吗？

【问题讨论】：

显示html结构
很难判断您是否没有发布您的 html 结构，但您可以查看我的答案以获得工作示例。

标签： javascript jquery

【解决方案1】：

错误信息非常清楚； 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>

【讨论】：