JavaScript ParentNode操作问题：Div容器嵌套失败并报错

兄弟，我一眼就瞅出你这问题的关键了！先给你拆解下：你想要的是嵌套div结构，但结果变成了平级，还一直弹那个Node.insertBefore: Child to insert before is not a child of this node的报错，对吧？

先唠唠报错的根源 #

这个报错说白了就是：你调用parent.insertBefore()的时候，第二个参数（也就是你指定要「插在哪个节点前面」的那个节点）根本不是当前parent节点的直接子元素，DOM找不到对应关系，自然就给你抛错了。

再看你代码里的坑 #

从你贴的代码片段能看出来，你把外层容器和内层容器搞混了：你只创建了一个embedDiv，给它加了embed的class，又把id设成了embed-player——这哪是嵌套啊，你根本没创建内层的那个播放器div！这就导致你没法实现嵌套结构，反而在插入的时候因为节点关系不对触发报错。

给你修正后的代码逻辑 #

按照你的需求，正确的操作应该是先创建两个div，把内层的嵌套进外层，再把外层插入到DOM的正确位置：

// 1. 创建外层容器div
var embedDiv = document.createElement('div');
embedDiv.className = 'embed';

// 2. 创建内层播放器div
var playerDiv = document.createElement('div');
playerDiv.className = 'embed-player';
playerDiv.textContent = 'theplayer embed HERE'; // 替换成你实际的播放器嵌入代码

// 3. 把内层div嵌套进外层容器
embedDiv.appendChild(playerDiv);

// 4. 把外层容器插入到目标父节点中（这里要注意第二个参数的正确性）
var parent = document.querySelector('你的目标父节点选择器'); // 比如'.some-parent'
var beforeNode = parent.querySelector('你要插在哪个子节点前面的选择器'); // 比如'.existing-child'

// 先判断beforeNode是不是parent的子元素，避免报错
if (beforeNode && parent.contains(beforeNode)) {
  parent.insertBefore(embedDiv, beforeNode);
} else {
  // 如果找不到目标节点，直接把外层容器追加到父节点末尾
  parent.appendChild(embedDiv);
}

验证最终效果 #

这样操作后，你就能得到想要的嵌套结构了：

<div class="embed">
    <div class="embed-player">theplayer embed HERE</div>
</div>

最后再提个小提醒：以后用insertBefore的时候，一定要确认第二个参数是父节点的直接子元素，要是拿不准，就先判断一下parent.contains(beforeNode)，避免踩同样的坑~

备注：内容来源于stack exchange，提问作者neogeo