2026.01.27

【JavaScript】JSからHTML要素を生成しよう（createElement/textContent/appendChild）

takahide

おはようございます。タカヒデです。

本日は、「JavaScriptにおける、『HTML要素の生成』の方法、および『createElementメソッド』『textContentプロパティ』『appendChildメソッド』」を紹介します。

こんな人にオススメ

ぜひ本記事を参考にしてください。

Contents

JavaScriptから新たにHTML要素を生成する手順

今回やりたいことは、「JavaScriptから新たにHTML要素を生成」することです。

もう少し具体的に言うと、「HTMLに<p>タグや<li>タグなどの新たな要素を生成」したい。
そういうことです。

これを実現するためには、以下の3つ手順で行います。

ここではHTMLで記載されたリストに、『追加テキスト』と記載した要素を新たに生成します。
こんな感じです↓。

では以下でそれぞれの手順について解説します。

まず最初の手順は「新たに生成したい要素を作成」します。

新たな要素の作成には『createElementメソッド』を使いましょう。
以下が記載方法です。

//記載方法

document.createElement(生成したい要素)

//記載方法

document.createElement(生成したい要素)

記載例も見てみます。

<ul class="test">
  <li>テキスト１</li>
  <li>テキスト２</li>
</ul>

<ul class="test">
  <li>テキスト１</li>
  <li>テキスト２</li>
</ul>

let testClass = document.querySelector(".test");
let text = document.createElement("li");

let testClass = document.querySelector(".test");
let text = document.createElement("li");

まず前段に「querySelector」で、HTMLの『test』クラスの要素を取得します。

その上で手順①として、新たに<li>タグの要素を作成し、変数『text』に格納しています。

続けて、「作成した要素に属性やテキストを追加」します。

ここではテキストの追加として『textContentプロパティ』を使用します。
記載方法は以下です。

//記載方法

要素.textContent = ‘追加したいテキスト’;

//記載方法

要素.textContent = ‘追加したいテキスト’;

以下が記載例です。
手順①から続きで見ていきます。

let testClass = document.querySelector(".test");
let text = document.createElement("li");
text.textContent = "追加テキスト";

let testClass = document.querySelector(".test");
let text = document.createElement("li");
text.textContent = "追加テキスト";

手順②として、作成した<li>タグの要素に「追加テキスト」というテキストを追加したことが分かります。

最期に、「作成した要素を適切な箇所に配置」します。

要素の配置には『appendChildメソッド』を使用します。
記載方法は以下です。

//記載方法

要素.appendChild(追加する要素)

//記載方法

要素.appendChild(追加する要素)

『appendChild』は追加したい要素の末尾に追加されます。

以下が記載例です。

let testClass = document.querySelector(".test");
let text = document.createElement("li");
text.textContent = "追加テキスト";
testClass.appendChild(text);

let testClass = document.querySelector(".test");
let text = document.createElement("li");
text.textContent = "追加テキスト";
testClass.appendChild(text);

手順③として、作成した<li>タグの要素を『test』クラスの末尾に追加されました。
実行するとこんな感じ↓。

以上で完成です。

これで実際にHTMLで記載されたリストに、『追加テキスト』と記載した要素を新たに生成することができましたね。

ぜひ追加する要素を変更してみるなど、いろいろ試してみてください。

以上が「JavaScriptにおける、『HTML要素の生成』の方法、および『createElementメソッド』『textContentプロパティ』『appendChildメソッド』」でした。

まとめ

新たな要素を生成するには、以下の3つ手順で実施
- ①要素の作成：『createElementメソッド』を使用し新たな要素を作成
- ②属性・テキストの追加：『textContentプロパティ』等を使用し作成した要素に属性やテキストを追加
- ③要素の配置：『appendChildメソッド』を使用し作成した要素を適切な箇所に配置

この記事が誰かの参考になれば幸いです。

お疲れさまでした。

ABOUT ME