【HTML】要素を追加・移動する 4メソッド【JS】

はじめに

HTMLに要素を追加・移動をするには

• prepend()
• append()
• before()
• after()

の4つのメソッドを使用します。

4メソッドの違い

• prepend()：子要素として先頭に挿入

• append()：子要素として末尾に挿入

• before()：同じ階層の要素として上に挿入

• after()：同じ階層の要素として下に挿入

正確な説明ではないですが、イメージを掴むには十分かと思います。

要素の追加

CodePenの使い方

【使い方】Resultをクリック
【使い方】ボタンをクリックすると動作します

See the Pen Qiita_prepend_append_before_after by Kohki_Takatama (@Kohki-Takatama) on CodePen.

要素の移動

See the Pen Qiita_prepend_append_before_after by Kohki_Takatama (@Kohki-Takatama) on CodePen.

関連するメソッド

insertAdjacentElement()

insertAdjacentElement(position, element)

position を指定できるのが特徴です。それぞれ、以下のように対応しています。

• 'beforebegin': before()
• 'afterbegin': prepend()
• 'beforeend': append()
• 'afterend': after()

うまく使えば、短いコードを書けるかもしれません。
ただし、2つの引数を取るため「入力漏れ・順序ミスの危険性」「意図が少し伝わりにくい」というデメリットがあると思います。
prepend() / append() / before() / after() を使用するほうが良いでしょう。

使用例

CodePenの使い方

【使い方】Resultをクリック
【使い方】ボタンをクリックすると動作します

See the Pen Qiita_prepend_append_before_after by Kohki_Takatama (@Kohki-Takatama) on CodePen.

insertAdjacentHTML()

insertAdjacentHTML(position, text)

insertAdjacentElement()と同じく position を取ります。
text をHTML要素として解釈するのがinsertAdjacentElement()と違う点です。

置換 replaceWith()

要素の置換を行うことができます。

削除 remove()

要素の削除を行うことができます。

非推奨：insertBefore() / appendChild()

いずれも追加・移動を行うことができるメソッドですが、
prepend() / append() / before() / after()と比較して以下の欠点があります。

• 柔軟性が低い
• 2つの引数を取るため「入力漏れ・順序ミスの危険性」「意図が少し伝わりにくい」
• 対応するメソッドがない（before に対する after）