vue3 - 详解报错TypeError: Failed to execute ‘insertBefore‘ on ‘Node‘: parameter 1 is not of type ‘Node‘.

已于 2024-09-12 16:01:52 修改
阅读量3k 收藏 3
点赞数 7
分类专栏： 前端常见问题解决 前端组件与功能(开箱即用) 文章标签： vue3.js nuxt3.js insertBefore Node节点报错详细解决 vue3打包后报错怎么办 页面路由切换刷新报错 vue3项目报错Failedt
于 2024-07-27 23:09:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/140742647
版权
前端组件与功能(开箱即用) 同时被 2 个专栏收录
354 篇文章 2460 订阅 ¥9.90 ¥99.00
订阅专栏
前端常见问题解决
133 篇文章 158 订阅 ¥9.90 ¥99.00
订阅专栏

问题截图

在vue3、nuxt3项目开发中，解决报错：TypeError: Failed to execute ‘insertBefore‘ on ‘Node‘: parameter 1 is not of type ‘Node’.，很奇怪的错误，可能出现在路由跳转、页面切换、build打包后、dom操作、第三方插件(地图/工具)等，本文提供详细排查及解决办法，保证搞定此问题。

其他教程都无法解决，在本文你只要报类似的错误就可以100%完美解决。

在这里插入图片描述

解决教程

首先来分析下这个问题，

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
专栏目录
订阅专栏
记一个vue问题 Failed to execute ‘insertBefore‘ on ‘Node‘
蛐蛐的博客
12-23 6045
文档：javascript - [Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node' - Stack Overflow 1.简介 nuxt+vue2，首先进入一个页面，点击类似列表里的一个item，跳转到新的页面，此时控制台报错 Failed to execute 'insertBefore' on 'Node': The node before which the
Nuxt3 - 完美解决 Failed to execute ‘insertBefore‘ on ‘Node‘: The node before which the new node is to be
王佳斌
10-27 2766
nuxt3 Uncaught 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，nuxt3报错解决，nuxt3浏览器控制台报错怎么解决，nuxt3未能在“Node”上执行“insertBefore”：要插入新节点的节点不是此节点的子节点，Nuxt3 - 完美解决 Failed to
Failed to execute ‘insertBefore‘ on ‘Node‘: parameter 1 is not of type ‘Node‘
firstbird的博客
11-09 6431
Failed to execute ‘insertBefore’ on ‘Node’: parameter 1 is not of type ‘Node’ 意思是：传入到insertBefore的应该是结点类型，而我传的字符串，就会报错的，如下： insertBefore（），需要的结点类型的对象 var html = "<span>我是下拉刷新的~~_"+down+"</span>"; 、、、这里的html是字符串类型的，不是span结点，所以报错 var ul_node .
v-for 搭配 v-if 产生“failed to execute ‘insertbefore‘ on ‘node‘ parameter 1 is not of type ‘node‘“错误
最新发布
汤一飞
09-12 308
Vue3 中单文件组件最好也用单个根节点包裹, 避免被其他组件遍历时, 因为组件内部存在多个根节点(以及根节点的 v-if)导致问题遍历时不要将 key 放到内部元素上, 就放在 template 上。
nuxt2/3 - 解决报错Failed to execute ‘appendChild‘ on ‘Node‘: This node type does not support this method
高级前端工程师
07-03 1593
nuxt2，nuxt3，Node节点，报错，未能在“Node”上执行“appendChild”：此节点类型不支持此方法。打包报错，no-ssr，client-only，nuxt报错Failed to execute ‘appendChild‘ on ‘Node‘: This node type does not support this method，详细解决方案，页面白屏，刷新页面会出现异常，页面点击路由跳转则正常，服务端渲染，SSR报错，Nuxt.js打包后报错DOME，如何解决这个错误，找不到怎么办，
vue3 报错 Failed to execute ‘insertBefore‘ （在keep-alive 才会存在）
Dream
06-18 2622
使用vue3 的过程中报错 Failed to execute 'insertBefore'
Uncaught TypeError: Failed to execute ‘appendChild‘ on ‘Node‘: parameter 1 is not of type ‘Node‘.
qq_43341807的博客
07-05 1万+
js:报错：Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
Uncaught TypeError: Failed to execute appendChild on Node: parameter 1 is not of type Node 解决
splitSecond的博客
06-15 3万+
Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’ 报错原因分析及解决方案. 前序: 最近在复习一下js基础的时候,遇到一些小坑坑,虽然很快解决了但是还是不能平息我的小情绪,特来开贴填了它.希望也能帮到某些遇到同样问题的小伙伴! 对于帮助别人这件事情,我始终坚信"一个人虽然可以走得很快,两个人却可以走得更远!" 思维导图分析: 开始将字符串标签插入容器中程序报错原因是
DOMException: Failed to execute 'insertBefore' on 'Node'
热门推荐
changhuzhao的专栏
12-07 5万+
问题：使用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来控制局部显隐导致的。
vue3 用global.prod.js打包后出现Failed to execute ‘insertBefore‘ on ‘Node‘解决办法及原因
X_xiaoqi的博客
07-01 1174
vue3 用global.prod.js打包后出现Failed to execute 'insertBefore' on 'Node'解决办法及原因
Error in nextTick: “NotFoundError: Failed to execute ‘insertBefore‘ on ‘Node‘: The node before which
郭宝的博客
05-19 3460
背景： 在子组件和和父组件来回调用其内部函数时，并通过v-if频繁控制显示/销毁，出现了如下报错信息： vue.runtime.esm.js:619 [Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node." warn
猫头虎分享已解决Bug || Uncaught TypeError: Failed to execute ‘appendChild‘ on ‘Node‘: parameter 1 is not of
从前端设计到后端实现，从云技术到人工智能，这里分享最新的技术见解和实践经验。一起学习，一起进步！
06-04 981
在这篇博客中，猫头虎将详细剖析前端开发中出现的“Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’”错误的原因。通过具体的代码示例、详细的操作步骤以及QA环节，帮助大家彻底解决这个问题。DOM（Document Object Model）节点是指HTML或XML文档中的一个对象。DOM节点可以是元素、文本、属性等。元素节点：代表HTML元素，如
Failed to execute ‘appendChild‘ on ‘Node‘: parameter 1 is not of type ‘Node‘.解决办法
weixin_43727933的博客
01-09 2751
在加载geojson文件时报错 ： Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node 解决办法
appendChild' on 'Node': parameter 1 is not of type 'Node'.
蚁族的奋斗的博客
05-09 9734
1 不是节点类型，node 节点的意思，这个方法必须得传节点，而不是字符串 let di = document.querySelector('#cc') let aa = `<div > <p>sdfsdkfs</p> </div>` console.log(aa) ...
DOM向HTML中添加元素Failed to execute ‘appendChild‘ on ‘Node‘: parameter 1 is not of type ‘Node‘问题
Bdbdbdnnd的博客
07-07 1152
DOM向HTML中添加元素Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'问题
百度地图使用报错：Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'
qq_41588568的博客
04-28 9904
第一次使用百度地图，自定义的inforwindow，使用的时候一直正常，但是只要我把信息窗口的那个叉叉关闭掉，再点击标注的时候 就会报上面的这个错误。 先给大家看一下我的使用方法： 我把信息窗口的数据放在了一个div中，使用vue的数据绑定动态从后台获得数据。 vue文件的data部分： 下边是我对信息窗口的使用，从后台获取数据之后，把数据给div中table绑定的pile...
百度地图 - 打开信息窗口错误：Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
锋利的绵羊的博客
11-04 1152
问题：自动切换并无问题，但是在手动关闭信息窗口后下一个窗口无法打开 原因：关闭窗口会删除窗口中的元素，下一次要打开窗口时找不到目标元素
浏览器控制台报错“TypeError: Failed to execute ‘appendChild‘ on ‘Node‘: parameter 1 is not of type ‘Node‘”
InterfaceToL的博客
06-01 535
问题原因：获取到的id值不是一个node，不能用appendChild方法。问题背景：通过元素点击事件给td赋值。
vue.runtime.esm.js:4605 [Vue warn]: Error in v-on handler: "TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'."
05-30
这个错误是因为你调用了 `appendChild` 方法，但是传递给它的参数不是一个 DOM 节点。 `appendChild` 方法的参数必须是一个 DOM 节点，而不能是一个简单的字符串或其他数据类型。 通常情况下，我们使用 `document.createElement` 方法来创建一个 DOM 节点，然后再将它插入到页面中。例如： ```javascript mounted() { const myDiv = this.$refs.myDiv; const mySpan = document.createElement('span'); mySpan.textContent = 'Hello, world!'; myDiv.appendChild(mySpan); } ``` 在这个例子中，首先使用 `document.createElement` 方法创建一个 `span` 元素，然后将它的文本内容设置为 `'Hello, world!'`，最后将它插入到 `myDiv` 元素中。 需要注意的是，如果你想将一个简单的字符串插入到 DOM 中，你可以将它包装在一个 `TextNode` 对象中，然后将这个对象插入到页面中。例如： ```javascript mounted() { const myDiv = this.$refs.myDiv; const myText = document.createTextNode('Hello, world!'); myDiv.appendChild(myText); } ``` 在这个例子中，使用 `document.createTextNode` 方法创建一个包含 `'Hello, world!'` 文本的 `TextNode` 对象，然后将它插入到 `myDiv` 元素中。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值