记录-插入节点insertBefore()报错

解决insertBefore错误
最新推荐文章于 2024-08-21 23:32:24 发布
最新推荐文章于 2024-08-21 23:32:24 发布
阅读量5.8k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： 日常 文章标签： javascript 报错 插入节点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Xiao_Qihang/article/details/99845258
本文记录了在使用insertBefore方法时遇到的错误，并解释了parentNode.insertBefore(newnode,existingnode)的正确用法，以及在不同浏览器下的兼容性问题。

记录今天在插入节点问题上出现了报错

Uncaught TypeError: Failed to execute ‘insertBefore‘ on ‘Node‘: 2 arguments required, but only 1 present.

在之前都是用appendChild，突发想用insertBefore，就报错了，感觉去看了一下文档。

  • parentNode.insertBefore(newnode,existingnode)：在现有的子节点前加入一个新的子节点。
    parentNode:父节点，也就是你要插入的地方
    newnode:你要插入的新节点
    existingnode:你要插入哪个节点的前面

  • node.appendChild(newnode)：在现有的子节点后加入一个新的子节点。

在网上找了一下原因，是兼容性问题：
在 Chrome 与火狐下，第二个参数必须写上。
Chrome 报错：
Uncaught TypeError: Failed to execute ‘insertBefore‘ on ‘Node‘: 2 arguments required, but only 1 present.
火狐报错：
TypeError: Not enough arguments to Node.insertBefore

vue3 - 详解报错TypeError: Failed to execute ‘insertBefore‘ on ‘Node‘: parameter 1 is not of type ‘Node‘.
高级前端工程师
07-27 1万+
vue3，nuxt3，vite，报错，TypeError: Failed to execute ‘insertBefore‘ on ‘Node‘: parameter 1 is not of type 'Node'.，节点报错，vue3 insertBefore，打包，运行，编译，dom元素，渲染，路由router，组件components，vue3生产环境跳转路由报错，浏览器控制台报错，百度地图使用报错，报错爆红，vue项目报错，插入节点insertBefore()报错，vue3 用global.prod
如何解决 Label Studio 中的 “NotFoundError: 无法在 ‘Node‘ 上执行 ‘insertBefore‘“ 错误？？
**My Coding Family**
06-23 690
🏆本文收录于 《全栈Bug调优(实战版)》 专栏，该专栏专注于分享我在真实项目开发中遇到的各类疑难Bug及其深层成因，并系统提供高效、可复现的解决思路和实操方案。无论你是刚入行的新手开发者，还是拥有多年项目经验的资深工程师，本专栏都将为你提供一条系统化、高质量的问题排查与优化路径，助力你加速成长，攻克技术壁垒，迈向技术价值最大化与职业发展的更高峰🚀！    📌 特别说明： 文中部分技术问题来源于真实生产环境及网络公开案例，均经过精挑细选与系统化整理，并结合多位一线资深架构师和工程师多年实战经验沉淀，提
【VUE+ElementUI】Failed to execute ‘insertBefore‘ on ‘Node‘: The node before which the new node is to
sunshineTing2的博客
03-29 600
【代码】【VUE+ElementUI】Failed to execute ‘insertBefore‘ on ‘Node‘: The node before which the new node is to。
React错误:无法在‘node’上执行‘insertBefore‘：要在其前插入新节点的节点不是此节点的子节点
无限进步
08-21 4269
然后我就把插件关掉后刷新页面，结果你猜怎么着？觉得很离谱遂做此文章。
打包生产环境下 ，insertBefore数据驱动DOM变化报错
weixin_54711921的博客
09-20 327
el-table-column渲染时报错，若 scope.row.field（field为任意字段值）不存在，对其直接执行 length、toString() 等方法而报错。打开弹框再关闭后，弹框中的 DOM 元素没有被销毁，可能会因为不该存在的 DOM 元素而报错。经过分析出现报错的操作步骤及多方资料查询，不同情况下的报错，其原因不同。在 v-if 值为 false 时，如果操作了 v-if 控制的 DOM，可能会因为该 DOM 元素不存在而报错。解决方案：v-show 替换 v-if。
Failed to execute ‘insertBefore’on ‘Node‘: The node before which the new node is to be inserted is..
qq_45991812的博客
05-17 4077
代码标签使用索引（index）作为key值，index可能会随着页面重新渲染发生变化，使数据无法绑定。【以前的数据和重新渲染后的数据随着 key 值的变化从而没法建立关联关系】建议改用：唯一id作为标识。
下载的开源grafana，打开网址时显示发生意外错误 详细信息 NotFoundError： Failed to execute 'insertBefore' on 'Node'：要插入新节点的节点不是此节点的子节点。 在 De （http://127.0.0.1:3000/public/build/7643.58cff21b29bee3f3dd7a.js:176:32228）在 Qe （http://127.0.0.1:3000/public/build/7643.58cff21b29bee3f3dd7
最新发布
08-19
如果后续有代码尝试操作这个被移除的节点（例如插入节点到某个参考节点之前），而参考节点此时不存在于DOM中，就会报错。 2. 权限指令（如v-hasPermi）通常是通过控制display属性（即v-show的效果）来实现的，如果...
前端面试汇总-JavaScript
分享前端工程化、动效魔法与性能之舞！
06-19 1265
JavaScript共有八种数据类型，分别是 Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。其中 Symbol 和 BigInt 是ES6 中新增的数据类型：Symbol 代表创建后独一无二且不可变的数据类型，它主要是为了解决可能出现的全局变量冲突的问题。BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数，使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了 Number 能够表示的安全整数范围。
[Javascript]：DOM概念、DOM操作元素、属性、文本节点详解
我只是个程序员。
09-19 3013
DOM全称是文档对象模型，是专门用于操作HTML/XML文档的API（应用程序接口）。DOM将文档看作一颗树，其中的每个成分都是对象，这些对象都看作是节点。可以将文档的一切都理解成节点对象。 DOM的组成部分介绍：文档、对象和模型 Document(文档)：当用浏览器打开一个页面文档时，这个文档就会被转成document对象，然后就可以调用了。后面会提到该对象的用法。 Object(对象)：DOM中的每个节点都是对象，通过对象的属性和方法就能够操作节点。 Model(模型)：DOM将整个文档
经常问到的前端面试题
liuhao9999的博客
10-09 508
JS相关 JS原型及原型链 functionPerson(){} Person.prototype.name='Zaxlct'; Person.prototype.sayName=function(){ alert(this.name); } varperson1=newPerson(); //JS 在创建对象的时候，都有一个__proto__的内置属性，用于指向创建它的构造函数的原型对象。 //每个对象都有__proto__属性，但只有函数对象才有prototype...
Spring源码——AOP
等一杯咖啡的博客
10-21 2433
前言 内容主要参考自《Spring源码深度解析》一书，算是读书笔记或是原书的补充。进入正文后可能会引来各种不适，毕竟阅读源码是件极其痛苦的事情。 本文主要涉及书中第七章的部分，依照书中内容以及个人理解对Spring源码进行了注释，详见Github仓库：https://github.com/MrSorrow/spring-framework 正式进入正文前，强烈推荐先阅读文末参考阅读第一篇：关于 S...
appendChild /insertBefore 的错误
dolra的专栏
05-23 860
    当对dom结构操作的时候，如果他本身是有问题的，但是这个问题，并没有暴露出来，例如，某些节点没有封闭。而平时这个没有封闭的节点可能光从表现上来看，是没有任何问题的。 可是，一旦我们做了点什么，例如去appendChild 或者 insertBefore ,这样的问题就暴露出来了。 所以，当有一些我们无法避免或者控制的时候，我们学会让我们的操作影响尽量的小，操作尽量的少。尽量
HTML DOM insertBefore() 方法 使用的时候发现一个问题，记录下
weixin_30367945的博客
10-03 354
在W3C中是这样定义的 第二个参数是可先的，但是在谷歌浏览器和火狐浏览器中测试是会有bug的，第二个参数是必填的，否则会报错 感兴趣的可以测试 　　以下是我测试的结果： 　　谷歌浏览器：Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': 2 arguments required, but only 1 pre...
vue项目报错 ：NotFoundError: Failed to execute ‘insertbefore‘ on ‘node‘
weixin_41258179的博客
11-24 3749
在vue项目开发过程中，遇到了如下警告，导致页面无法点击 NotFoundError: Failed to execute ‘insertBefore’ on ‘Node’: The node before : The node before which the new node is to be inserted is not a child of this node." 参考 此博客解决了问题，记录一下 ...
NotFoundError Failed to execute ‘insertBefore‘ on ‘Node‘
weixin_53812239的博客
03-01 2259
NotFoundError: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this nod” 记录vue报错。
Error in nextTick: “NotFoundError: Failed to execute ‘insertBefore‘ on ‘Node‘
zxy010714的博客
09-15 7232
问题描述： 在使用vue的时候，我们因为常用v-if改变了页面的DOM结构，可能会遇见这样的告警信息，并且页面会被卡主，需要刷新才可以解决；错误告警如下： 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." 错误代码： 问题解决
node.parentNode.insertBefore(newChild,refChild)
weixin_30445169的博客
06-09 1231
<div> <h1 id = "first">first</h1> <h1 id="second">second</h1> <input type="button" onclick="test()" value="insertBefore" /> </div> <script> f...
解决Vue报错：[Vue warn]: Error in nextTick: “NotFoundError: Failed to execute ‘insertBefore‘ on ‘Node‘: T
Xpy 的博客
04-29 9663
解决Vue报错：[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.” 一、问题产生原因 因为是在template 包裹的最外层div 上使用了v-if、当不渲染时、不符合VUE语法。 <template&gt.
Error in nextTick: “NotFoundError: Failed to execute ‘insertBefore‘ on ‘Node‘: The node before which
wl7tvm98的博客
12-05 3188
Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which
insertBefore报错
05-13
### 插入节点失败的原因分析 `insertBefore` 是 JavaScript 中用于在指定子节点之前插入新节点的方法。如果该方法抛出 `Cannot read properties of null (reading 'insertBefore')` 或类似的错误，通常是因为调用此方法的对象为 `null` 或未正确初始化。 以下是可能引发此类错误的主要原因： 1. **目标父节点不存在** 如果尝试通过 `parentNode.insertBefore(newNode, referenceNode)` 调用时，`parentNode` 的值为 `null`，则会触发上述错误[^1]。 2. **引用节点不合法** 当 `referenceNode` 不是 `parentNode` 的直接子节点时，也会导致错误。例如，`referenceNode` 可能已经被移除或从未属于当前父节点的子集[^2]。 3. **异步更新中的竞争条件** Vue.js 使用虚拟 DOM 来管理视图状态的变化。当某些逻辑依赖于尚未完成渲染的 DOM 元素时，可能会因为访问不到实际存在的 DOM 对象而报错。这种情况尤其容易发生在生产环境中优化后的代码中[^3]。 4. **第三方组件库问题** 若项目引入了 Element Plus、Ant Design Vue 等 UI 组件库，则这些库内部可能存在对原生 DOM API 的不当调用，尤其是在动态加载或者销毁实例的过程中[^3]。 --- ### 解决方案 #### 方法一：验证并修复父级容器 确保执行 `insertBefore` 操作前已确认其作用域内的上下文有效。可以通过简单的判断语句来规避潜在风险： ```javascript if (!parentNode || !referenceNode) { console.error('Parent or Reference Node missing'); } else { parentNode.insertBefore(newNode, referenceNode); } ``` #### 方法二：延迟操作直到 DOM 更新完毕 利用 Vue 提供的生命钩子函数（如 `nextTick`），可以等待框架完全同步真实 DOM 后再继续后续处理流程。 ```javascript import { nextTick } from 'vue'; nextTick(() => { if (parentNode && referenceNode) { parentNode.insertBefore(newNode, referenceNode); } }); ``` #### 方法三：调整模板表达式策略 对于频繁切换可见性的场景，考虑替换掉可能导致瞬态丢失绑定关系的关键字组合方式。比如将原本基于布尔型控制结构 (`v-if`) 改成样式隐藏机制(`v-show`) ，从而减少不必要的重建过程带来的副作用: ```html <!-- 替代 v-if --> <div v-show="isVisible">...</div> ``` #### 方法四：审查外部资源冲突情况 仔细检查所使用的任何附加插件是否存在兼容性隐患，并参照官方文档说明进行适当配置修改以适配最新版核心引擎特性需求. --- ### 总结 综上所述，“cannot read property 'insertBefore' of null”的根本原因是由于试图在一个非法状态下操纵DOM树造成的。针对不同层面的具体表现形式采取相应的预防措施能够有效地缓解甚至彻底消除这类现象的发生几率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值