JavaScript创建节点报错：xxx.appendChild is not a function

最新推荐文章于 2023-01-11 16:42:06 发布
最新推荐文章于 2023-01-11 16:42:06 发布
阅读量1.7k 收藏
点赞数 2
CC 4.0 BY-SA版权
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Acid_lemon/article/details/117809720
本文介绍了一个关于使用DOM操作方法appendChild时遇到的问题及解决方案。当通过getElementsByClassName等方法获取元素时，由于返回的是一个类似数组的对象而非单一DOM元素，直接使用可能会导致错误。文章提供了正确的获取和使用DOM元素的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

报错：
在这里插入图片描述
原因：
使用domElement.appendChild()中，获取domElement 时，使用了getElementsByClassName() 这类获得的结果是数组的函数，没有定位到其中的某一个对象。

解决方法：

  1. 获取到数组的第一个对象，var domElement = getElementsByClassName(“div”) [0]
  2. 使用getElementsById获取到唯一的对象
leaflet-JavaScript地图库 简单使用，marker标记覆盖物，popup自定义弹框，点聚合...
weixin_44167504的博客
07-05 2223
1.地图初始化 2.标记覆盖物 3.自定义弹出窗口 4.点聚合 5.区划遮罩及边缘划线 6.关于 自定义Marker 使用 L.divIcon 地图缩放位置发生偏移 7.纠偏 8.判断图层加载失败/成功 9、多边形 polygon 10、热力图
js原生appendChild的bug解决心得分享
10-27
appendChild主要是用来追加节点插入到最后；循环的时候由于不停的搬家导致length 在改变，改用for的话开始的length已经被固定，问题就解决啦
domElement.appendChild is not a function
热门推荐
youngLady兰的博客
09-23 1万+
好奇怪，为何appendChild会不是一个函数嘞，简直中邪了。 （一） domElement.appendChild()中的domElement使用了getElementsByClassName()这样类似于选中数组的函数，而没有定位到其中的某一个对象。
JS添加子节点报错：appendChild is not a function
qq_44731369的博客
08-15 1万+
报错信息： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&
关于JS使用appendChild(Node)函数出现Uncaught TypeError: appendChild is not a function的解决方案
高电平的博客
03-27 8016
关于JS使用appendChild(Node)函数出现Uncaught TypeError: appendChild is not a function的解决方案 再学习JS的过程中，我想通过createElement()方法创建一个节点再通过appendChild()方法插入到页面中，但是使用的过程中出现了Uncaught TypeError: appendChild is not a function的报错，在经过查找资料和解决方案，我发现在获取DOM元素时使用getElementByXXX()方法时，
appendChild is not a function
sy_yan的博客
05-30 5956
appendChild is not a function 当获取父亲节点是一个dom数组的话 parent.appendChild(child); 报错 解决方法： parent[0].appendChild(child);
TypeError: Cannot read property 'PhysSystem' of undefined at t.onAdd (<anonymous>:1:1441796) at t.e._added (<anonymous>:1:1016614) at t.e._added (<anonymous>:1:1024207) at t.e._appendChild (<anonymous>:1:1027081) at e.appendChild (<anonymous>:1:1078759) at <anonymous>:1:1527074 at w (<anonymous>:1:1527346) at f.insertChildToElement (<anonymous>:1:1528552) at S (<anonymous>:1:1530111) at u.f.appendChild (<anonymous>:1:1530497)(env: Windows,mp,1.06.2504010; lib: 3.8.11)出现了这个问题
07-28
我们正在解决一个JavaScript运行时TypeError错误：TypeError: Cannot read property 'PhysSystem' of undefined。 根据错误信息，我们试图访问一个未定义（undefined）对象的'PhysSystem'属性。这意味着在访问之前...
async handleDownload(url, name) { const xhr = new XMLHttpRequest(); xhr.open('GET', url, true); // url 文件的完整地址 http:XXX xhr.responseType = 'blob'; xhr.onload = function () { if (xhr.status === 200) { const res = xhr.response; const link = document.createElement('a'); link.style.display = 'none'; const url = window.URL.createObjectURL(res); link.href = url; link.setAttribute('download', `代码.xlsx`); document.body.appendChild(link); link.click(); window.URL.revokeObjectURL(link.href); document.body.removeChild(link); } } xhr.send() } 如何在他的基础上添加 headers: { "Content-Type": "multipart/-data", Authorization: "", },
05-28
不过需要注意，设置Content-Type为multipart/form-data时，通常用于POST请求上传文件，而GET请求使用这个可能会有问题，浏览器可能会忽略或报错。接下来，用户提到的Authorization头，这部分需要正确携带令牌，比如...
vue2中 1.在<div =‘app’></>节点的同级，加上代码： </>,在body节点闭合标签之前，加上代码注意：引入的文件名有变化之前的css和js文件需注意注释或删除。2.在登陆完成之后，调用机器人初始化函数，并配置用户参数，加上代码if(typeof loadRobot==='function') { loadRobot({ url:'http://158.1.10.156:9528' }).than(()=>{ if(window.robotInit ==='function') { window.robotInit({ appNo:'', token:'', operNo:'', url:'/hzbankrobotHtml', assetsDNS:'' },()={},(error)=>{ console.error('robot-error',error) }) } })。3.在main.js中，加上代码：window.Vue=Vue。4.配置代理/hzbankRobot代理到机器人对应环境地址
最新发布
07-30
console.error('loadRobot is not a function'); } }); } } ``` 注意：上面的参数（appNo, token, operNo）需要根据实际登录返回的数据进行填充。 3. 在main.js中添加全局变量Vue: ```javascript import ...
javascript实现动态加载CSS.docx
01-13
4. **A/B测试**：为不同用户组加载不同的CSS，以测试哪种设计效果更好。 在实际应用中，为了优化性能，可以考虑以下策略： 1. **预加载**：如果预测到用户可能会访问某个CSS，可以在他们交互之前预先加载。 2. **...
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
主要介绍了Vue 报错TypeError: this.$set is not a function 的解决方法，分享给大家，需要的朋友们下面随着小编来一起学习学习吧
Uncaught TypeError: appendChild is not a function
XiongYiping666的博客
07-25 1003
js报错
javascript操作dom的第一个warn : box2.appendChild is not a function
ShenYouRong的博客
05-28 300
Uncaught TypeError: box2.appendChild is not a function
Uncaught TypeError: $(...).appendChild is not a function
Koow的博客
04-01 9911
如上图所示，找不到$()这个function,但是在上面我定义了 : function $(id) { return document.getElementById(id); } 用于获取jsp页面属性，在本地是没有问题的，但是到了线上却找不到$(id)了， 无奈之余只好将$换成别的函数名，就可以了
添加子节点时报错：TypeError: oUl.appendChild is not a function
weixin_42349568的博客
06-15 1363
原代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> li{ margin: 10px; background:red; } </style> </head> <body> <u.
getElementsByClassName.appendChild报错“Uncaught TypeError: t1.appendChild is not a function”
god_sword_的博客
10-28 947
getElementsByClassName这个方法返回的是：返回文档中所有指定类名的元素集合。因为集合是没有appendChild这个方法的，所以使用getElementsByClassName这个方法获取的元素使用appendChild方法会报错，想要用appendChild就不要用getElementByClassName，而是使用getElementById。 ...
Uncaught TypeError: box1.appendChild is not a function
mango
01-29 3633
在对节点进行添加操作时，出现报错appendChild不是一函数： Uncaught TypeError: box1.appendChild is not a function 原代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; ...
JS 报错getElementsByClassName.appendChild报错“Uncaught TypeError: s.appendChild is not a function”
01-11 587
getElementsByClassName这个方法返回的是：返回文档中所有指定类名的元素集合。因为集合是没有appendChild这个方法的，所以使用getElementsByClassName这个方法获取的元素使用appendChild方法会报错，想要用appendChild就不要用getElementByClassName，而是使用getElementById。getElemenByTagName 也不行哦。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值