【JavaScript講座】要素を生成する

前回は、カスタムデータ属性について紹介しました。

【JavaScript講座】カスタムデータ属性とは

2019年9月25日

今回は、JavaScript 側から HTML の要素を生成する方法について。

それでは、見ていきましょう。

要素を生成する

JavaScript で HTML の要素を生成するには、document.createElement を使用します。

生成した要素を追加する

生成した要素を追加する方法です。

早速、サンプルコードを書いていきます。

まずは、HTML からです。

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>JavaScript サンプル</title>
</head>
<body>
  <script src="js/sample.js"></script>
</body>
</html>

続いて、JavaScript です。

const h1 = document.createElement('h1');
h1.textContent = 'Heading';
document.body.appendChild(h1);

textContent で h1 の内容を指定しています。

appendChild は親要素である body 内の末尾に h1 を追加しています。

結果は以下の通りです。

生成した要素を前に追加する

appendChild を使えば、親要素内の末尾に追加される形ですが、前に追加する方法もあります。

サンプルコードを書いていきます。

HTML は先程のものと同じコードなので、省略します。

JavaScript のコードです。

const h1 = document.createElement('h1');
h1.textContent = 'Heading';
document.body.appendChild(h1);

const p = document.createElement('p');
p.textContent = 'Tomorrow belongs to those who prepare for it today.';
document.body.appendChild(p);

const h2 = document.createElement('h2');
h2.textContent = 'Sub Title';
document.body.insertBefore(h2, p);

insertBefore は第1引数に挿入したい要素、第2引数にどの要素の前に追加したいかを指定します。

結果は以下の通りです。