Uncaught TypeError: box1.appendChild is not a function

在对节点进行添加操作时,出现报错appendChild不是一函数:

Uncaught TypeError: box1.appendChild is not a function

原代码:

		<!DOCTYPE html>
		<html lang="en">
		<head>
		    <meta charset="UTF-8">
		    <title></title>
		</head>
		<body>
		<div class="box1">
		    <div class="box2"></div>
		    <div class="box3"></div>
		</div>
		<script>
		    //节点的操作
		    //1.创建
		    var aaa = document.createElement("li");
		    var bbb = document.createElement("adjsk");
		    console.log(aaa);
		    console.log(bbb);
		    //添加
		    var box1 = document.getElementsByClassName("box1");
		    box1.appendChild(aaa);
		    box1.insertBefore(bbb,aaa);
		
		</script>
		
		</body>
		</html>

这与获取节点的方法有关
在获取box1时,使用的是getElementsByClassName()方法,其获得的结果是数组的函数,没有定位到其中的某一个对象。所以我们需要将其定位到我们所需要的对象上去,需要修改部分如下:

			//添加
		    var box1 = document.getElementsByClassName("box1")[0];
上一篇:JS基础-添加删除记录(复杂版)


下一篇:DOM-添加元素、节点