今天爱分享给大家带来DOMException: Failed to execute ‘insertBefore’ on ‘Node’【解决办法】，希望能够帮助到大家。
问题：
使用vue开发时，抛出如下异常：
DOMException: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.
(在“节点”上执行“insertBefore”失败:要插入新节点的节点不是该节点的子节点。)
经资料查询发现，导致上述异常是因为在html中使用了v-if来控制局部显隐导致的。
解释：
在vue和大部分的mvvm的前端js框架中，基本都提供了类似 *-if 和 *-show的局部显隐控制指令，而这两个指令在实际运用中是有区别的。
相同点：都可以实现局部html（或者说是dom元素）的显示和隐藏
不同点：显示和隐藏的原理不同。对于*-show指令而言，当为false时不显示控制的dom元素，其实就是display = none，只是将控制的dom元素给隐藏了，打开控制台调试工具，仍然能够看到被隐藏的代码。但是，对于 *-if指令而言，当为false时不显示被控制的dom元素是因为被控制的dom元素被从dom中移除了，也就是说，打开调试工具后，你看不到被隐藏的代码。
解决方案
根据上面的解释我们可以得出结论：在v-if为false时，如果我们后续的js操作了v-if控制的dom元素，将会因为该部分dom元素不存在而抛出上述异常。