首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么I'm gettingUncaught TypeError:无法在'Node‘上执行'appendChild’:参数1不是‘Node’类型。使用这个可拖动的代码?

这个错误通常是由于在执行appendChild操作时,传递的参数不是一个有效的Node节点类型引起的。在这种情况下,可能是由于以下几个原因导致的:

  1. 参数错误:传递给appendChild方法的参数不是一个有效的Node节点。Node节点是DOM树中的一个元素,可以是HTML元素、文本节点或注释节点等。请确保传递给appendChild方法的参数是一个有效的Node节点。
  2. 元素未创建:在执行appendChild操作之前,可能没有正确地创建或获取要添加的节点。请确保在执行appendChild之前,已经创建了一个有效的Node节点,并且该节点已经被正确地插入到DOM树中。
  3. 元素已存在:尝试将一个已经存在于DOM树中的节点再次添加到另一个节点中时,会导致此错误。请确保在执行appendChild之前,要添加的节点不是已经存在于DOM树中的节点。
  4. 兼容性问题:某些旧版本的浏览器可能不支持某些特定的DOM操作或节点类型。请确保您的代码在目标浏览器中得到支持,并且使用了正确的DOM操作和节点类型。

对于可拖动的代码,如果出现这个错误,可能是由于在拖动操作中尝试将一个无效的节点添加到另一个节点中。您可以检查拖动代码的实现,确保在执行appendChild操作时,传递的参数是一个有效的Node节点。如果问题仍然存在,您可以提供更多的代码细节,以便更好地帮助您解决问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端技术工具类文章

[语法] Object.values(obj) 复制代码 [参数] obj 被返回枚举属性值对象。 [返回值] 一个包含对象自身所有枚举属性值数组。...使用了 include and exclude 会按照这个规则进行匹配缓存那些页面,不使用会缓存所有。 如果使用了第二条筛选规则,那么必须配置对照和 name,不然无法正确缓存。...("CLICK ME");\ btn.appendChild(t); 复制代码 new Map() JavaScript对象(Object),本质是键值对集合(Hash结构),但是传统只能用字符串当作键...这给它使用带来了很大限制。 为了解决这个问题,ES6提供了Map数据结构。它类似于对象,也是键值对集合,但是“键”范围不限于字符串,各种类型值(包括对象)都可以当作键。...这个回调函数就是我们实际进行状态更改地方,并且它会接受 state 作为第一个参数 Action 类似于 mutation,不同在于: Action 提交是 mutation,而不是直接变更状态。

1.2K30

高级前端必会手写面试题及答案1

方法来实现转换Array.from(arrayLike);手写 call 函数call 函数实现步骤:判断调用对象是否为函数,即使我们是定义函数原型,但是可能出现使用 call 等方式调用情况...处理传入参数,截取第一个参数所有参数。将函数作为上下文对象一个属性。使用上下文对象来调用这个方法,并保存返回结果。删除刚才新增属性。返回结果。...,调用其 resolve 变更状态,在这个 resolve 里会依次调用 callbacks 里回调,这样就执行了 then 里方法了启后:一步中,当 then 里方法执行完成后,返回一个结果,...== y; }}手写 apply 函数apply 函数实现步骤:判断调用对象是否为函数,即使我们是定义函数原型,但是可能出现使用 call 等方式调用情况。...将函数作为上下文对象一个属性。判断参数值是否传入使用上下文对象来调用这个方法,并保存返回结果。

88520

【Python基础】06、Python函数

函数是一种设计工具,它能让程序员将复杂系统分解为管理部件 函数用于将相关功能打包并参数化  python中可以创建4种函数: 全局函数:定义模块中 局部函数:嵌套于其它函数中 lambda...(匿名)函数:仅是一个表达式 方法:与特定数据类型关联函数,并且只能与数据类型关联一起使用 函数和过程联系:每个Python函数都有一个返回值,默认为None,也可以使用“return value...             expression:用到args中各参数表达式       lambda定义代码必须是合法表达式,不能出现多条件语句(可使用if三元表达式)和非表达式,如for和while...而不是一个代码块 def语句创建函数将赋值给某变量名,而lambda表达式直接返回函数 lambda也支持使用默认参数,关键字参数,容器参数 In [28]: lambda x,y:x+y Out...return产生输出以保证函数独立性         (2)尽量减少使用全局变量进行函数间通信         (3)不要在函数中修改可变类型参数          (4)避免直接改变定义另外一个模块中变量

2.5K10

32个手撕JS,彻底摆脱初级前端(面试高频)

作者:洛霞 https://juejin.im/post/6875152247714480136 作为前端开发,JS是重中之重,最近结束了面试高峰期,基本offer也定下来了就等开奖,趁着这个时间总结下...13.函数珂里化 指的是将一个接受多个参数函数 变为 接受一个参数返回一个函数固定形式,这样便于再次调用,例如f(1)(2) 经典面试题:实现add(1)(2)(3)(4)=10; 、 add(1)...执行构造函数并将this绑定到新创建对象。 判断构造函数执行返回结果是否是引用数据类型,若是则返回构造函数执行结果,否则返回创建对象。...} // 目标对象需要统一是引用数据类型,若不是会自动转换 const to = Object(target); for (let i = 0; i < args.length...中回调函数机制,node中回调函数其实是内部使用了观察者模式。

1.7K30

关于W3Cschool定义设计模式--常用9种设计模式介绍

什么是设计模式:      是一套经过反复使用、多人知晓、经过分类代码设计经验总结      为什么使用设计模式:      为了代码重用性、让代码更容易被他人理解、保证代码可靠性。...1、多次new为什么产生一个对象呢?(new原理)      (1).创建了一个新空对象。      (2).将这个对象__proto__和函数prototype做连接。      ...,多数应用在系统接口使用,也就是别人提供了一个功能,但要求传入一个A类型参数      //而我们手里数据是B类型,如果我们想使用这个功能。...那么有两种解决办法:      //第一,把自己代码进行修改,让B类型改为A类型,这是非常蠢做法。      ...八、抽象工厂模式      工厂模式中,将多个实例相同属性或方法,再次抽象成一个公共对象,从公共对象,再次创建出具体实例。

35000

那些高级前端是如何回答面试题_2023-02-24

会存在安全问题,如果数据中可能不是 json 数据,而是可执行 JavaScript 代码,那很可能会造成 XSS 攻击。...serviceWorker使用原理是啥?渐进式网络应用(PWA)是谷歌2015年底提出概念。基本上算是web应用程序,但在外观和感觉与原生app类似。...JS 执行过程中会产生执行环境,这些执行环境会被顺序加入到执行栈中。如果遇到异步代码,会被挂起并加入到 Task(有多种 task) 队列中。...setTimeout 和 setInterval一个 timer 指定时间并不是准确时间,而是达到这个时间后尽快执行回调,可能会因为系统正在执行别的事务而延迟。...console.log('promise2') })}, 0)// 以上代码浏览器和 node 中打印情况是不同// 浏览器中打印 timer1, promise1, timer2

46330

滴滴前端一面常考手写面试题整理_2023-03-01

setInterval 被推入任务队列时,如果在它前面有很多任务或者某个任务等待时间较长比如网络请求等,那么这个定时器执行时间和我们预定它执行时间可能并不一致 // 最常见出现就是,当我们需要使用...// 与原设定间隔时差了: 573 毫秒 // 与原设定间隔时差了: 633 毫秒 再次强调 ,定时器指定时间间隔,表示是何时将定时器代码添加到消息队列,而不是何时执行代码。...定时器代码至队列中,主线程中还有任务执行,所以等待,some event 执行结束后执行 T1定时器代码;又过了 100ms,T2 定时器被添加到队列中,主线程还在执行 T1 代码,所以等待;又过了...100ms,理论又要往队列里推一个定时器代码,但由于此时 T2 还在队列中,所以 T3 不会被添加(T3 被跳过),结果就是此时被跳过;这里我们可以看到,T1 定时器执行结束后马上执行了 T2 代码,...执行构造函数并将this绑定到新创建对象。 判断构造函数执行返回结果是否是引用数据类型,若是则返回构造函数执行结果,否则返回创建对象。

1.7K30

关于 JavaScript 错误处理最完整指南(上半部)

创建,错误对象有三个属性: message:带有错误消息字符串 name:错误类型 stack:函数执行堆栈跟踪 例如,我们使用 TypeError 对象创建一个错误,对应 message 是创建传入字符号...我们代码中,主要还是使用Error和TypeError这两种最常见类型来创建自己错误对象 ?。...; throw null; 但是,最好避免这些事情:始终抛出正确错误对象,而不是一些基本类型。 这样有助于代码中,错误处理一致性。...*/ 异步中错误处理 JavaScript本质是同步,是一种单线程语言。 诸如浏览器引擎之类宿主环境使用许多Web API, 增强了 JS 以与外部系统进行交互并处理与 I/O 绑定操作。...; }, 1000); } 这个函数大约在1秒后抛出异常,处理这个异常正确方法是什么?

1.6K30

前端里拖拖拽拽了解一下?

拖动元素期间,一些与拖放相关事件会被触发,像 drag 和 dragover 类型事件会被频繁触发。...dragleaveondragleave当拖动元素离开一个释放目标元素放置dragoverondragover当元素被拖到一个释放目标元素时(100 ms/次)放置dropondrop当拖动元素释放目标元素释放时放置...1.3 DataTransfer 在上述事件类型中,不难发现,放置元素和拖动元素分别绑定了自己事件,如何将拖拽元素和放置元素建立联系以及传递数据?...拖拽列表中和“源对象”产生“相互作用”列表项 整体交互事件设计思路如下: (1) ondragstart 此时开始拖拽“源对象”时机,在此事件回调函数中改变“源对象”样式,设置拖拽一些传递参数等初始值...,可以参阅:《关于react中使用拖拽插件评测[4]》 四、总结 由于低代码平台其实会有丰富拖拽场景,从扩展和兼容性考虑,最终选择了 react-dnd 作为基础拖拽库,当然,复杂拖拽场景下

4.6K30

原生JS封装拖动验证滑块你会吗?

以下文章来源于程序员成长指北 ,作者_release 专注 Node.js 技术栈分享,从 前端 到 Node.js 再到 后端数据库,祝您成为优秀高级 Node.js 全栈工程师。...座右铭:今天未完成,明天更不会完成 前言 闲着没事,就想着写写原生js玩玩,在网上看了几个效果后决定做这个效果,并且使用了prototype和eventEmitter封装成了库。...最终效果 微信图片_20200911093415.gif 分析 看到这个效果我们首先应该想到和拖动有关api: onmousedown, onmousemove, onmouseup 其次要支持用户传入放置这个组件...我们先来看下使用方式,再来决定我们怎么编写这个库 微信图片_20200911093435.jpg 具体使用就是这样,我们还想用户能通过import等方式使用,所以我们就要支持esMoudule导入方式...1判断是浏览器环境还是nodeJS环境,方便代码三后期使用代码块2声明了一个对象SliderTools,将用户传进来option和默认defaultOption进行合并 编写核心函数1(创建

5.8K50

JavaScript | 笔记

[i].nodeType == 8) { console.log(bodyElement.childNodes[i].nodeValue); } } 但是这个只能找到body子节点是注释情况..., 而不是 replaceWith 后 // 注意: 经测试: 不同节点.replaceWith(node1) 时, node1 对象不要重复使用, 否则可能导致想象外效果 temp1.replaceWith...这个对象是通过将接收到数据类型视为 JSON 解析得到。 text response 是一个以 DOMString 对象表示文本。...如果想要mcrwayfun.com名下二级域名都可以使用该Cookie,需要设置Cookiedomain参数为.mcrwayfun.com,这样使用test1.mcrwayfun.com和test2...例,我www.qq.com下种下了sessionStorage,wx.qq.com下是,无法访问新开tab下,或者关闭本TAB再打开后(也是www.qq.com),也是无法访问到之前种sessionStorage

1.5K20

HTML5 drag和drop亲手实践

> 这样,该元素就可以拖动了 ondragstart: 当元素开始被拖动时,触发该事件,目标对象是被拖动元素 ondragover: 当被拖动元素悬挂元素移动时候,该事件触发。...(insertNode, node) } 这个其实比较简单,就是找到节点父亲,然后将要插入节点放到节点前面。...1.我们先放置几张图片,并且将它们dragable设置为true,这样它们就可以拖动了。...当ondragleave事件触发时候,则把dotted类从目标对象移除。 // 当被拖动元素悬挂元素移动时候,该事件触发。目标对象是被拖动元素悬挂那个元素。...而ondragend主要是用于将target设置为null,代码如下: // 当鼠标松开被拖动元素时候,触发该事件。目标对象是被拖动元素悬挂那个元素。

91830

前端高频手写面试题总结

深拷贝: 深拷贝相对浅拷贝而言,如果遇到属性值为引用类型时候,它新建一个引用类型并将对应值复制给它,因此对象获得一个新引用类型不是一个原有类型引用。...} return res;}使用 setTimeout 实现 setIntervalsetInterval 作用是每隔一段指定时间执行一个函数,但是这个执行不是真的到了时间立即执行,它真正作用是每隔一段时间将事件加入事件队列中去... setInterval 被推入任务队列时,如果在它前面有很多任务或者某个任务等待时间较长比如网络请求等,那么这个定时器执行时间和我们预定它执行时间可能并不一致// 最常见出现就是,当我们需要使用...: 573 毫秒// 与原设定间隔时差了: 633 毫秒再次强调 ,定时器指定时间间隔,表示是何时将定时器代码添加到消息队列,而不是何时执行代码。...定时器代码至队列中,主线程中还有任务执行,所以等待,some event 执行结束后执行 T1定时器代码;又过了 100ms,T2 定时器被添加到队列中,主线程还在执行 T1 代码,所以等待;又过了

2.1K20

前端高频手写面试题

} return -1;}event模块实现node中回调函数机制,node中回调函数其实是内部使用了观察者模式。...实现防抖函数(debounce)防抖函数原理:把触发非常频繁事件合并成一次去执行 指定时间内只执行一次回调函数,如果在指定时间内又触发了该事件,则回调函数执行时间会基于此刻重新开始计算图片防抖动和节流本质是不一样...// 目标对象需要统一是引用数据类型,若不是会自动转换 const to = Object(target); for (let i = 0; i < args.length; i++) {...:判断调用对象是否为函数,即使我们是定义函数原型,但是可能出现使用 call 等方式调用情况。...将函数作为上下文对象一个属性。判断参数值是否传入使用上下文对象来调用这个方法,并保存返回结果。

56320

原 荐 快速开发 HTML5 WebGL

这个 Demo 左侧为面板,从面板中拖动物体到右侧 3D 场景中,当然,我鼠标拖动位置就是物体放置点,但是这次我们重点是如何在斜面上放置模型。 效果图 ?...arrNode[i].setName(name);//设置组名字 显示分组 var imageArr = []; switch(...true 为设置节点拖拽,否则节点不可拖拽;还有 node.s 是 HT 默认封装好样式设置方法,如果用户需要自己添加方法,则可通过 node.a 方法来添加,参数一为用户自定义名称,参数二为用户自定义值...loadObjFunc 函数中最后一个参数为生成模型 position3d 坐标,g3d.getHitPosition 这个方法总共有三个参数,第一个参数为事件类型,第二和第三个参数如果不设置,则默认为水平面的中心点也就是...g3d.setFocus(node);//将焦点设置在当前节点 return node; } } }); } 代码结束!

1.6K30

前端二面手写面试题总结3

这个对象使用 open 方法创建一个 HTTP 请求,open 方法所需要参数是请求方法、请求地址、是否异步和用户认证信息。发起请求前,可以为这个对象添加一些信息和监听函数。...执行temp(4),这个函数内执行add(m+n),n是此次传进来数值4,m值还是一步中3,所以add(m+n)=add(3+4)=add(7),此时m=7,并且返回temp函数执行temp(5)...,这个函数内执行add(m+n),n是此次传进来数值5,m值还是一步中7,所以add(m+n)=add(7+5)=add(12),此时m=12,并且返回temp函数由于后面没有传入参数,等于返回...temp函数不被执行而是打印,了解JS朋友都知道对象toString是修改对象转换字符串方法,因此代码中temp函数toString函数return m值,而m值是最后一步执行函数时m=12...:判断调用对象是否为函数,即使我们是定义函数原型,但是可能出现使用 call 等方式调用情况。

72240

滴滴前端一面常考手写面试题合集2

: 1 //通过这个字段来确定子父级 } ...]实现代码如下:function treeToList(data) { let res = []; const dfs = (tree)...cloneDeep1(target[i], hash) : target[i]; } } return cloneTarget;}实现一个函数判断数据类型function getType...setTimeout 实现 setIntervalsetInterval 作用是每隔一段指定时间执行一个函数,但是这个执行不是真的到了时间立即执行,它真正作用是每隔一段时间将事件加入事件队列中去,...针对 setInterval 这个缺点,我们可以使用 setTimeout 递归调用来模拟 setInterval,这样我们就确保了只有一个事件结束了,我们才会触发下一个定时器事件,这样解决了 setInterval...实现思路是使用递归函数,不断地去执行 setTimeout 从而达到 setInterval 效果function mySetInterval(fn, timeout) { // 控制器,控制定时器是否继续执行

76621
领券