DOM要素を作成する

このチュートリアルでは、DOM要素を作成し、DOMツリーにアタッチする方法を説明します。

DOM要素を作成するには、createElement()メソッドを使用します。

const element = document.createElement(htmlTag);Code language: JavaScript (javascript)

次の例では、新しい<div>要素を作成します。

const e = document.createElement('div');Code language: JavaScript (javascript)

そして、<div>要素に任意のHTMLコンテンツを入れます。

e.innerHTML = 'JavaScript DOM';Code language: JavaScript (javascript)

そして、appendChild()メソッドを使用して、<div>要素をDOMツリーにアタッチします。

document.body.appendChild(e);Code language: CSS (css)

innerHTMLプロパティを使用する以外に、DOMメソッドを使用してテキストノードを作成し、新しい要素にテキストノードを追加することもできます。

var textnode = document.createTextNode('JavaScript DOM');
e.appendChild(textnode); Code language: JavaScript (javascript)

その後、appendChild()メソッドを使用して、新しい要素をDOMツリーにアタッチできます。