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.

经资料查询发现，导致上述异常是因为在html中使用了v-if来控制局部显隐导致的。

解释：

在vue和大部分的mvvm的前端js框架中，基本都提供了类似 *-if 和 *-show的局部显隐控制指令，而这两个指令在实际运用中是有区别的。

相同点：都可以实现局部html（或者说是dom元素）的显示和隐藏

不同点：显示和隐藏的原理不同。对于*-show指令而言，当为false时不显示控制的dom元素，其实就是display = none，只是将控制的dom元素给隐藏了，打开控制台调试工具，仍然能够看到被隐藏的代码。但是，对于 *-if指令而言，当为false时不显示被控制的dom元素是因为被控制的dom元素被从dom中移除了，也就是说，打开调试工具后，你看不到被隐藏的代码。

v-if代码：

当为false时，显示如下：

v-show代码

当为false时，显示如下：

解决方案

根据上面的解释我们可以得出结论：在v-if为false时，如果我们后续的js操作了v-if控制的dom元素，将会因为该部分dom元素不存在而抛出上述异常。
针对这个问题，我们可以用v-show来代替v-if，就可以解决这个问题。