1. ホーム

Uncaught TypeError: box1.appendChild は関数ではありません。

2022-02-10 11:58:40
<パス

ノードに操作を追加する際、appendChild が関数でないというエラーが発生します。

Uncaught TypeError: box1.appendChild は関数ではありません。

オリジナルのコードです。

		<!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>
		    //operation of nodes
		    //1. Create
		    var aaa = document.createElement("li");
		    var bbb = document.createElement("adjsk");
		    console.log(aaa);
		    console.log(bbb);
		    //add
		    var box1 = document.getElementsByClassName("box1");
		    box1.appendChild(aaa);
		    box1.insertBefore(bbb,aaa);
		
		</script>
		
		</body>
		</html>


これは、ノードを取得する方法と関連しています
box1を取得する際、getElementsByClassName()メソッドを使用していますが、取得する結果は配列の関数であり、オブジェクトの1つを見つけることはできません。そこで、必要なオブジェクトにロケートする必要があるのですが、修正が必要な部分は以下の通りです。

			// Add
		    var box1 = document.getElementsByClassName("box1")[0];