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

# はじめに

HTMLに要素を追加・移動をするには
- `prepend()`
- `append()`
- `before()`
- `after()`

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

# 4メソッドの違い

- `prepend()`：子要素として先頭に挿入
- `append()`：子要素として末尾に挿入

- `before()`：同じ階層の要素として上に挿入
- `after()`：同じ階層の要素として下に挿入

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

<details><summary>CodePenの使い方</summary>

| |
|:--:|
|![スクリーンショット 2024-05-04 8.45.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/1cab3f31-d45c-8178-0ea2-5d2715815879.png)|
|【使い方】Resultをクリック|
|![スクリーンショット 2024-05-04 8.45.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/d6cf1698-450d-cdd8-2f04-4d8e96437645.png)|
|【使い方】ボタンをクリックすると動作します|
</details>

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="vYMoGyo" data-user="Kohki-Takatama" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Kohki-Takatama/pen/vYMoGyo">
  Qiita_prepend_append_before_after</a> by Kohki_Takatama (<a href="https://codepen.io/Kohki-Takatama">@Kohki-Takatama</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 要素の移動

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="jORgqRZ" data-user="Kohki-Takatama" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Kohki-Takatama/pen/jORgqRZ">
  Qiita_prepend_append_before_after</a> by Kohki_Takatama (<a href="https://codepen.io/Kohki-Takatama">@Kohki-Takatama</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 関連するメソッド


## `insertAdjacentElement()`

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement

```js
insertAdjacentElement(position, element)
```

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

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

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

### 使用例


<details><summary>CodePenの使い方</summary>

| |
|:--:|
|![スクリーンショット 2024-05-04 8.45.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/1cab3f31-d45c-8178-0ea2-5d2715815879.png)|
|【使い方】Resultをクリック|
|![スクリーンショット 2024-05-04 8.45.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/d6cf1698-450d-cdd8-2f04-4d8e96437645.png)|
|【使い方】ボタンをクリックすると動作します|
</details>

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="VwNoaXZ" data-user="Kohki-Takatama" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Kohki-Takatama/pen/VwNoaXZ">
  Qiita_prepend_append_before_after</a> by Kohki_Takatama (<a href="https://codepen.io/Kohki-Takatama">@Kohki-Takatama</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## `insertAdjacentHTML()`

```js
insertAdjacentHTML(position, text)
```

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

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

## 置換 `replaceWith()`

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

https://developer.mozilla.org/ja/docs/Web/API/Element/replaceWith

## 削除 `remove()`

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

https://developer.mozilla.org/ja/docs/Web/API/Element/remove
## 非推奨：`insertBefore()` / `appendChild()`

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

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