【JavaScript】appendChildのエラー「Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'」の対策

元のコード

appendChildメソッドが受け入れるのはNode型のオブジェクトであり、今回挿入しようとしている「<li>りんご</li>」は文字列です。そのためエラーが発生しています。

const fruit = document.getElementById("fruit");
const apple = "<li>りんご</li>";
fruit.appendChild(apple);

createElementを使う

createElementメソッドを使うことでHTML要素をNodeオブジェクトとして作成することが可能です。はじめにcreateElementでli要素を作成し、その要素にinnerHTMLで"りんご"と設定することでNodeオブジェクトとして要素を作成することができます。最後に、作成したNodeオブジェクトをappendChildを使用してfruitに追加します。

const fruit = document.getElementById("fruit");
const apple = document.createElement("li");
apple.innerHTML = "りんご";
fruit.appendChild(apple);