添加子节点时报错：TypeError: oUl.appendChild is not a function

原代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">li{margin: 10px;background:red;}</style></head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script type="text/javascript">var oUl=document.getElementsByTagName("ul");//这个位置获取ul的元素节点，因为使用的是getElementsByTagName，其返回的是个数组var aLi=document.getElementsByTagName("li");for(var i=0;i<aLi.length;i++){aLi[i].onclick=function(){console.log(this.innerHTML);}}for(var i=6;i<=10;i++){var oLi=document.createElement("li");oLi.innerHTML = i;oUl.appendChild(oLi);// 就是因为返回的oUl是一个数组,所以这样子写是不合规的,因为如果有多个ul的话,系统不知道在哪个ul下进行添加子节点.}</script></body>
</html>

这个位置获取ul的元素节点，因为使用的是getElementsByTagName，其返回的是个数组。所以这样子写是不合规的,因为如果有多个ul的话,系统不知道在哪个ul下进行添加子节点。

对此，只要让电脑知道要在哪个节点下添加子节点就可以了，比如更改：

oUl[0].appendChild(oLi);

于是代码变成：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">li{margin: 10px;background:red;}</style></head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script type="text/javascript">var oUl=document.getElementsByTagName("ul");//这个位置获取ul的元素节点，因为使用的是getElementsByTagName，其返回的是个数组var aLi=document.getElementsByTagName("li");for(var i=0;i<aLi.length;i++){aLi[i].onclick=function(){console.log(this.innerHTML);}}for(var i=6;i<=10;i++){var oLi=document.createElement("li");oLi.innerHTML = i;oUl[0].appendChild(oLi);//告诉电脑，在第一个ul下进行添加子节点}</script></body>
</html>

同样的举例：

<script type="text/javascript">var speedx=3;var div=document.getElementsByTagName("div");var currentleft=parseInt(getComputedStyle(div[0]).left);//因为getElementsByTagName返回的是所有div标签组成的数组，所以这里获取它的属性值，需要指定是对第一个进行操作，否则报错。//当然，若是使用getElementById则返回的是一个节点，就不存在这种问题。alert(currentleft);</script>

添加子节点时报错：TypeError: oUl.appendChild is not a function相关推荐

html添加子节点方法,HTML DOM appendChild() 方法
HTML DOM appendChild() 方法 appendChild()方法的作用是:在指定父节点的子节点列表的末尾添加一个节点. 如果给定的子节点是文档中现有节点的引用,appendChild ...
eletree append方法添加子节点
eletree append方法添加子节点 eletree官方文档中,提供了append方法用于添加子节点. append方法接收两个参数,key.data.key很好理解,是你选择添加子节点的节点k ...
ajax上传文件获取失败,Ajax上传文件/照片时报错TypeError ：Illegal invocation的解决方法...
本篇文章给大家带来的内容是关于Ajax上传文件/照片时报错TypeError :Illegal invocation的解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 问题 A ...
qteewidgetitem添加子节点_行为树的节点
一,行为树几大节点: Root节点:只能有一个子节点,并且该节点必须是" 复合"节点.不能将任何Decorator或Service附加到Root,在root可以指定其黑板资源: T ...
unity查找子物体、子节点、获取子节点对象脚本，添加子节点脚本，添加父节点脚本
分享一个代码管理片段的代码,主要是用于查找子物体,控制子物体等等的. 静态代码片段,便于调用. 不做太多的解释,直接上代码,每个方法都有注释. 有任何问题直接留言,看到会回复 QQ群 20701909 ...
jQuery删除和添加子节点
//删除子节点 $("#addInfos").children("#div").remove();//增加子节点 $("#text")[0] ...
已解决实现心型图案时报错TypeError: ‘float‘ object cannot be interpreted as an integer
已成功解决实现心型图案时使用range在生成数列时,报错TypeError: 'float' object cannot be interpreted as an integer 问题描述我在使用p ...
Vue elementui时间控件编辑时报错：date.getHours is not a function
时间控件,这里用了type="datetime",并且设置了格式化, value-format="yyyy-MM-dd HH:mm:ss" <el-for ...
happypack打包报错TypeError: this.getOptions is not a function
网上很多TypeError: this.getOptions is not a function,需要从错误提示看: 上面红色框可以看出style-loader报错了,应该改style-loader, ...
解决HuggingFace加载预训练模型时报错TypeError: expected str, bytes or os.PathLike object, not NoneType
完整报错: TypeError: expected str, bytes or os.PathLike object, not NoneType 解决方法检查下载的组件: 步骤1:完整的下载组件,包 ...

添加子节点时报错：TypeError: oUl.appendChild is not a function

添加子节点时报错：TypeError: oUl.appendChild is not a function相关推荐

最新文章

热门文章