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

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

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

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

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

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

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

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

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

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

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

「document.createElement()」の使い方！

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要素が作成されます。

Webページに要素を追加する

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

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

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

参考リンク！

仕様書。
https://dom.spec.whatwg.org/#ref-for-dom-document-createelement%E2%91%A0

MDN。
https://developer.mozilla.org/ja/docs/Web/API/Document/createElement

おすすめの再生リスト！

こちらは僕が制作したYouTubeの再生リスト「JavaScriptの入門編」です。

「JavaScriptの入門編」はWeb制作を勉強している方がJavaScriptに入門する際に知っておきたい情報をまとめたコンテンツとなります。

こちらの再生リストで「JavaScript」について「丁寧」に解説しているので、もし気になる方はチェックしてみてください！一緒に楽しく学習しましょう！！

まとめ！

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

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

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

分かりやすかった！

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

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

またね！