JS辞典/DOM操作/createElement()

JavaScript ・ DOM操作

createElement()

新しい要素を作って追加する

新しいHTML要素を作るメソッドです。作った要素は append() などでページに追加して、初めて画面に表示されます。

種類: Document のメソッド
戻り値: 作成した要素
追加: append / prepend / before / after

サンプルコード

HTML

1<input id="todo" placeholder="やること">

2<button type="button" id="add">追加</button>

3<ul id="list"></ul>

CSS

1button {

2 padding: 6px 16px;

3 border: 1px solid #b68235;

4 border-radius: 4px;

5 background: #fff;

6 color: #7d5411;

7 font: inherit;

8 cursor: pointer;

10input {

11 padding: 6px 10px;

12 border: 1px solid #bbb;

13 border-radius: 4px;

14 font: inherit;

15}

1const input = document.querySelector('#todo');

2const list = document.querySelector('#list');

4document.querySelector('#add').addEventListener('click', () => {

5 if (!input.value) return;

6 const li = document.createElement('li');

7 li.textContent = input.value;

8 list.append(li);

9 console.log('追加：' + input.value);

10 input.value = '';

11});

実行結果

ブラウザでの表示文字を入力して「追加」を押すと、リストに項目が増えます

コンソール

console.log() の出力がここに表示されます

解説

document.createElement('タグ名') で新しい要素を作ります。作っただけではページに表示されず、append() などで既存の要素の中に追加する必要があります。

作った要素には textContent で文字を入れたり、classList でクラスを付けたりしてから追加します。

上の例は、入力した文字をリスト項目として追加していく、簡単なやることリストです。

応用例・注意点

追加・削除のメソッド

メソッド	説明
`親.append(要素)`	親の中の最後に追加
`親.prepend(要素)`	親の中の最初に追加
`要素.before(新要素)`	要素の直前に追加
`要素.after(新要素)`	要素の直後に追加
`要素.remove()`	要素を削除

属性を設定してリンクを作る

href などの属性はプロパティや setAttribute() で設定します。

HTML

1<p id="area"></p>

1const a = document.createElement('a');

2a.href = 'https://example.com';

3a.textContent = '公式サイト';

4a.target = '_blank';

5document.querySelector('#area').append(a);

注意点

01同じ要素を2か所に append すると、最初の場所から移動します（複製はされません）。
02大量の要素を1つずつ追加すると遅くなることがあります。まとめて追加するときは DocumentFragment を使います。