はじめに

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）