在对节点进行添加操作时,出现报错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];