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

getElementByID + .appendhild() [TypeError:无法在‘Node’上执行'appendChild‘:参数1不是’Node‘类型。]

getElementByID是一种用于通过元素的ID属性获取DOM元素的方法,而appendChild()是一种用于将一个DOM节点添加到另一个DOM节点的方法。在给定的问答内容中,出现了一个错误,即TypeError:无法在‘Node’上执行'appendChild‘:参数1不是’Node‘类型。

这个错误通常是由于参数类型不正确导致的。根据错误信息,参数1不是一个Node类型的对象,因此无法执行appendChild()方法。

要解决这个问题,需要确保参数1是一个有效的DOM节点。可能的原因是getElementByID未能找到具有指定ID的元素,或者在调用appendChild()之前未正确创建或获取DOM节点。

以下是一种可能的修复方法:

  1. 确保HTML文档中存在具有指定ID的元素。使用getElementByID方法时,需要确保文档中存在具有相应ID的元素。可以通过检查HTML代码或使用开发者工具来确认。
  2. 确保正确创建或获取DOM节点。在调用appendChild()之前,需要确保参数1是一个有效的DOM节点。可以使用其他方法(例如querySelector)来获取DOM节点,或者手动创建一个新的DOM节点。
  3. 检查代码中的其他错误。如果以上步骤都没有解决问题,可能存在其他代码错误导致无法正确执行appendChild()方法。可以仔细检查代码,查找其他可能的错误。

总结起来,要解决这个错误,需要确保参数1是一个有效的DOM节点,并且在调用appendChild()之前正确创建或获取该节点。

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

相关·内容

DOM

一、节点层次 HTML页面中,文档元素始终都是元素。 1. Node类型 JavaScript中的所有节点类型都继承自Node类型,因此所有节点类型都共享着相同的基本属性和方法。...10 Node.DOCUMENT_FRAGMENT_NODE 11 Node.NOTATION_NODE 12 需要注意的是,IE中不支持常量 if(someNode.nodeType === 1...true NodeList对象拥有length属性,但并不是Array实例;其是基于DOM结构动态执行查询的结果,因此DOM结构的变化能够自动反应在NodeList对象中。...Comment类型 注释DOM中是通过Comment类型来表示的。...其他类型 CDATASection类型、DocumentType类型很少用到,这里不再赘述。 二、DOM操作技术 1. 动态脚本 元素添加到页面之前,是不会下载外部文件的。

1.5K21

深入理解JavaScript与DOM

相应地,的下一个节点也不是,因为和之间有一个空行的节点,一般遇到这种情况需要遍历所有的子节点然后判断nodeType类型1是元素,2是属性,3是text节点,详细的type类型可以通过此地址: Node.ELEMENT_NODE...Node节点 通过DOM API创建内容的时候需要注意node节点的2种类型,一种是元素节点,一种是text节点,一章节已经列出了所有的节点类型,这两种需要我们现在特别注意。...这也是我们要讲解该小节原因: 该模型运行你绑定多个处理句柄到一个事件,也就是说一个事件触发的时候多个函数都可以执行,另外,该模型也可以让你很容易里删除某个已经绑定的句柄。...; }); 注意到我们传入了一个匿名函数作为第三个参数,JavaScript运行我们定义和执行匿名函数,这种匿名函数特别适合作为参数传递,实际我们也可以传递有名的函数(代码如下),但是你们函数更容易做...window下的event属性来包含这些信息,虽然不是大问题,但我们也需要注意一下,下面的代码是兼容性的: function myEventHandler(e) { // 注意参数e

63230

HTML DOM(二):节点的增删改查

一篇:HTML DOM(一)        一篇讲述了DOM的基本知识,从其得知,DOM眼中,HTML的每个成分都可以看作是节点(文档节点、元素节点、文本节点、属性节点、注释节点,其中...getElementById(id):通过id获取元素节点,如果页面上含有多个相同id的节点,那么只获取第一个节点,理论,id页面中应该是唯一的。...注意,这个方法IE和W3C(FireFox、Chrome)下表现是不一样的,这个方法应该不是DOM LEVEL 1里的规范,IE支持LEVEL 1,和后来的标准就有很多差异了。...tdNode.removeChild(tdNode.firstChild); // 将input追加到单元格中,appendChild(node)将node追加到父节点末尾,insertBefore...(node1, node2)是将node1加入到node2之前 tdNode.appendChild(inputNode); // 聚焦input,chrome下,光标直接定位到文本最右边

1.6K00

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

= function(onResolved, onRejected) { // 首先判断两个参数是否为函数类型,因为这两个参数是可选参数 onResolved = typeof onResolved...[], arrayLike);通过 Array.from 方法来实现转换Array.from(arrayLike);手写 call 函数call 函数的实现步骤:判断调用对象是否为函数,即使我们是定义函数的原型的...手写 Promise.thenthen 方法返回一个新的 promise 实例,为了 promise 状态发生变化时(resolve / reject 被调用时)再执行 then 里的函数,我们使用一个...then 里的方法了启后:一步中,当 then 里的方法执行完成后,返回一个结果,如果这个结果是个简单的值,就直接调用新 promise 的 resolve,让其状态变更,这又会依次调用新 promise...== y; }}手写 apply 函数apply 函数的实现步骤:判断调用对象是否为函数,即使我们是定义函数的原型的,但是可能出现使用 call 等方式调用的情况。

89820

JavaScript DOM基础2

CDATASection 表示CDATA区域类型 DocumentType 表示文档声明类型 DocumentFragment 表示文档片段类型 Attr 表示属性节点类型 1.Node类型 Node...接口是DOM1级就定义了,Node接口定义了12个数值常量以表示每个节点的类型值。...alert(Node.ELEMENT_NODE);//1,元素节点类型值 alert(Node.TEXT_NODE);//2,文本节点类型值 我们建议使用Node类型的属性来代替1,2这些阿拉伯数字,有可能大家会觉得这样岂不是很繁琐吗...DOM基础那章,我们已经可以对元素节点进行查找、创建等操作,元素节点的nodeType为1,nodeName为元素的标签名。 元素节点对象非IE浏览器可以返回它具体元素节点的对象类型。...var box = document.getElementById('box'); alert(box.children.length);//得到有效子节点数目 4.contains()方法 判断一个节点是不是另一个节点的后代

80280

前端基础-节点操作

() 用来生成文本节点,参数为所要生成的文本节点的内容; node.appendChild() 接受一个节点对象作为参数,将其作为最后一个子节点,插入当前节点; node.hasChildNodes...() 返回一个布尔值,表示当前节点是否有子节点 node.removeChild() 接受一个子节点作为参数,用于从当前节点移除该子节点 node.cloneNode() 用于克隆一个选中的节点。...它接受一个布尔值作为参数,表示是否同时克隆子节点,默认是false,即不克隆子节点。 注意: 不会克隆绑定到该元素的事件; node.innerHTML 返回该元素包含的 HTML 代码。...注意: getComputedStyle() 是window对象下的方法,不是DOM对象 #d1{ width: 200px;height: 200px;...//判断这个节点是不是li if (node.nodeType == "1" && node.nodeName == "LI") {

4.3K10

JavaScript(十)

总共有 12 种节点类型,这些类型都继承自一个基类型Node 类型 DOM1 级定义了一个 Node 接口,该接口将由 DOM 中的所有节点类型实现。...这个 Node 接口 JavaScript 中是作为 Node 类型实现的,JavaScript 中的所有节点类型都继承自 Node 类型,因此所有节点类型都共享着相同的基本属性和方法。...的值是元素的标签名 } 首先检查节点类型,看它是不是一个元素。...有两个方法是所有类型的节点都有的。第一个就是 cloneNode(),用于创建调用这个方法的节点的一个完全相同的副本。cloneNode() 方法接受一个布尔值参数,表示是否执行深复制。...参数为 true 的情况下,执行深复制,也就是复制节点及其整个子节点树; 参数为 false 的情况下,执行浅复制,即只复制节点本身。

67910
领券