2025/01/26 (更新日:2025/01/26)

【JavaScript】「document.createElement()」の使い方！【要素の幅を取得】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事では「document.createElement()」の使い方の解説をします！

「document.createElement()」を使うと、HTML要素を生成することができ、「appendChild()」などと組み合わせて使うことで、動的なWebページを作る際に非常に役立ちます。

この記事の内容！

また、下の動画でも「document.createElement()」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「document.createElement()」を使うと何ができるのか？

document.createElement()は、指定したタグ名の新しい要素を生成するためのメソッドです。

このメソッドは、新しい要素を作成するだけで、それをページ上に表示するわけではありません。作成した要素をWebページに追加するには、さらに別のメソッドを使用する必要があります。

Webページに作成した要素を追加するには、「appendChild()」などを使います。

「appendChild()」についてはこちら！

「appendChild()」についてはこちらの記事で解説しています！

【JavaScript】「appendChild()」の使い方！【要素をWebページに追加】

const element = document.createElement(tagName);

「tagName」には、作成するHTMLタグの名前（例: div, span, p など）を入れます！

const newDiv = document.createElement('div');
console.log(newDiv); // <div></div>

このように書くことで、新しいdiv要素を生成することができます。

const newDiv = document.createElement('div');
newDiv.id = 'myDiv';
newDiv.className = 'box';

上記のコードのように書くと、id=”myDiv”とclass=”box”を持つdiv要素を作成することができます。

const newDiv = document.createElement('div');
newDiv.textContent = 'Hello, World!';

このように、テキストを追加することも可能です。

これにより、Hello, World!というテキストを持つdiv要素が作成されます。

const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div';
document.body.appendChild(newDiv);

作成した要素を実際にDOMに追加するには、「appendChild()」などを使用します。

上記のコードは、新しいdiv要素をbody内に追加する、というものです。

これらを活用して、より動的でインタラクティブなWebページを作成してみてください！

「document.createElement()」を使うと、HTML要素を生成することができる。

「appendChild()」などと組み合わせて使うことで、Webページに追加することができる。

分かりやすかった！

こんな感じですかね！

それではこんな感じでこの記事を終わります！

またね！