【JavaScript / DOM】ノードの追加・置換・削除・移動
JavaScript/DOMにおけるノードの追加・置換・削除を解説します。
追加
最初の子ノード（prepend）
ノードの最初の子ノードとして追加するには、prependメソッドを使います。
<div id="box">
<p>TEXT</P>
</div>
<script type="text/javascript">
let box = document.getElementById("box");
let node = document.createElement('p');
node.textContent = 'Hello World';
box.prepend(node);
</script>追加後のHTML構造は次のようになります。
<div id="box">
<p>Hello World</p>
<p>TEXT</p>
</div>最後の子ノード（append）
ノードの最後の子ノードとして追加するには、appendメソッドを使います。
<div id="box">
<p>TEXT</P>
</div>
<script type="text/javascript">
let box = document.getElementById("box");
let node = document.createElement('p');
node.textContent = 'Hello World';
box.append(node);
</script>追加後のHTML構造は次のようになります。
<div id="box">
<p>TEXT</p>
<p>Hello World</p>
</div>前の兄弟ノード（before）
ノードの前の兄弟ノードとして追加するには、beforeメソッドを使います。
<div id="box">
<p>TEXT</P>
</div>
<script type="text/javascript">
let box = document.getElementById("box");
let node = document.createElement('p');
node.textContent = 'Hello World';
box.before(node);
</script>追加後のHTML構造は次のようになります。
<p>Hello World</p>
<div id="box">
<p>TEXT</p>
</div>次の兄弟ノード（after）
ノードの次の兄弟ノードとして追加するには、メソッドを使います。
<div id="box">
<p>TEXT</P>
</div>
<script type="text/javascript">
let box = document.getElementById("box");
let node = document.createElement('p');
node.textContent = 'Hello World';
box.after(node);
</script>追加後のHTML構造は次のようになります。
<div id="box">
<p>TEXT</p>
</div>
<p>Hello World</p>HTMLコード（insertAdjacentHTML）
insertAdjacentHTMLメソッドはHTMLコードでノードを追加できます。
第１引数に追加位置、第２引数にHTMLコードを渡します。
<div id="box">
<p>TEXT</P>
</div>
<script type="text/javascript">
let box = document.getElementById("box");
box.insertAdjacentHTML('beforebegin', '<p>Hello World</p>');
</script>追加後のHTML構造は次のようになります。
<p>Hello World</p>
<div id="box">
<p>TEXT</p>
</div>第１引数の追加位置は次の４つです。
| 値 | 追加位置 |
|---|---|
| beforebegin | 前の兄弟ノード |
| afterbegin | 最初の子ノード |
| beforeend | 最後の子ノード |
| afterend | 次の兄弟ノード |
置換
ノード自身
ノード自身を別のノードに置換するには、replaceWithメソッドを使います。
<div id="box">
<p id="tmp">TEXT</P>
</div>
<script type="text/javascript">
let tmp = document.getElementById("tmp");
let node = document.createElement('p');
node.textContent = 'Hello World';
tmp.replaceWith(node);
</script>置換後のHTML構造は次のようになります。
<div id="box">
<p>Hello World</p>
</div>子ノード
ノードの子ノードを別のノードに置換するには、replaceChildメソッドを使います。
<div id="box">
<p id="tmp">TEXT</P>
</div>
<script type="text/javascript">
let box = document.getElementById("box");
let tmp = document.getElementById("tmp");
let node = document.createElement('p');
node.textContent = 'Hello World';
box.replaceChild(node, tmp);
</script>置換後のHTML構造は次のようになります。
<div id="box">
<p>Hello World</p>
</div>削除
ノード自身
ノード自身を削除するには、removeメソッドを使います。
<div id="box">
<p id="tmp">TEXT</P>
</div>
<script type="text/javascript">
let tmp = document.getElementById("tmp");
tmp.remove();
</script>削除後のHTML構造は次のようになります。
<div id="box"></div>子ノード
ノードの子ノードを削除するには、removeChildメソッドを使います。
<div id="box">
<p id="tmp">TEXT</P>
</div>
<script type="text/javascript">
let box = document.getElementById("box");
let tmp = document.getElementById("tmp");
box.removeChild(tmp);
</script>削除後のHTML構造は次のようになります。
<div id="box"></div>移動
既存のノードは別の位置に追加すると、元の位置から移動します。
<div id="box">
<p id="tmp">TEXT</P>
</div>
<hr>
<div id="container">
<p>text</P>
</div>
<script type="text/javascript">
let container = document.getElementById("container");
let tmp = document.getElementById("tmp");
container.append(tmp);
</script>移動後のHTML構造は次のようになります。
<div id="box"></div>
<hr>
<div id="container">
<p>text</P>
<p id="tmp">TEXT</P>
</div>
