ITHACK
【JavaScript / DOM】ノード（要素・テキスト・コメント）の追加・置換・移動・削除

【JavaScript / DOM】ノード（要素・テキスト・コメント）の追加・置換・移動・削除

JavaScript/DOMにおけるノード（要素・テキスト・コメント）の追加・置換・移動・削除について解説します。

検証環境

追加

ノードの追加は要素ノードのメソッドを使用します。

複数のメソッドが備わっており、種類によってノードの追加位置が異なります。

最初の子ノード（prepend）

最初（先頭）の子ノードとして追加するにはprependメソッドを使用します。

基本構文

要素ノード.prepend(追加ノード)

サンプル

<div id="box" style="border: 1px solid black;">
    <p>TEXT</p>
</div>

<script type="text/javascript">
    let element = document.getElementById("box");
    
    let node = document.createElement('p');
    node.textContent = "Hello World";
    
    ___ih_hl_start
    element.prepend(node);
    ___ih_hl_end
</script>

追加後のHTML構造イメージは次のようになります。

<div id="box" style="border: 1px solid black;">
    <p>Hello World</p>
    <p>TEXT</p>
</div>

最後の子ノード（append）

最後（末尾）の子ノードとして追加するにはappendメソッドを使用します。

基本構文

要素ノード.append(追加ノード)

サンプル

<div id="box" style="border: 1px solid black;">
    <p>TEXT</p>
</div>

<script type="text/javascript">
    let element = document.getElementById("box");
    
    let node = document.createElement('p');
    node.textContent = "Hello World";
    
    ___ih_hl_start
    element.append(node);
    ___ih_hl_end
</script>

追加後のHTML構造イメージは次のようになります。

<div id="box" style="border: 1px solid black;">
    <p>TEXT</p>
    <p>Hello World</p>
</div>

前の兄弟ノード（before）

前の兄弟ノードとして追加するには、beforeメソッドを使います。

基本構文

要素ノード.before(追加ノード)

サンプル

<div id="box" style="border: 1px solid black;">
    <p>TEXT</p>
</div>

<script type="text/javascript">
    let element = document.getElementById("box");
    
    let node = document.createElement('p');
    node.textContent = "Hello World";
    
    ___ih_hl_start
    element.before(node);
    ___ih_hl_end
</script>

追加後のHTML構造イメージは次のようになります。

<p>Hello World</p>
<div id="box" style="border: 1px solid black;">
    <p>TEXT</p>
</div>

次の兄弟ノード（after）

次の兄弟ノードとして追加するには、afterメソッドを使用します。

基本構文

要素ノード.before(追加ノード)

サンプル

<div id="box" style="border: 1px solid black;">
    <p>TEXT</p>
</div>

<script type="text/javascript">
    let element = document.getElementById("box");
    
    let node = document.createElement('p');
    node.textContent = "Hello World";
    
    ___ih_hl_start
    element.after(node);
    ___ih_hl_end
</script>

追加後のHTML構造イメージは次のようになります。

<div id="box" style="border: 1px solid black;">
    <p>TEXT</p>
</div>
<p>Hello World</p>

HTMLコード（insertAdjacentHTML）

HTMLコードでノードを追加するにはinsertAdjacentHTMLメソッドを使用します。

基本構文

要素ノード.insertAdjacentHTML("追加位置", "HTMLコード")

第１引数の追加位置は次のいずれかの値を与えます。

値 位置
afterbegin 最初の子ノード
beforeend 最後の子ノード
beforebegin 前の兄弟ノード
afterend 次の兄弟ノード

サンプル

<div id="box" style="border: 1px solid black;">
    <p>TEXT</p>
</div>

<script type="text/javascript">
    let element = document.getElementById("box");
    
    ___ih_hl_start
    element.insertAdjacentHTML("afterbegin", "<p>first</p>");
    element.insertAdjacentHTML("beforeend", "<p>last</p>");
    element.insertAdjacentHTML("beforebegin", "<p>before</p>");
    element.insertAdjacentHTML("afterend", "<p>after</p>");
    ___ih_hl_end
</script>

追加後のHTML構造イメージは次のようになります。

<p>before</p>
<div id="box" style="border: 1px solid black;">
    <p>first</p>
    <p>TEXT</p>
    <p>last</p>
</div>
<p>after</p>

置換

ノードの置換は要素ノードのメソッドを使用します。

複数のメソッドが備わっており、種類によって置換対象が異なります。

ノード自身（replaceWith）

ノード自身を別のノードに置換するにはreplaceWithメソッドを使用します。

基本構文

要素ノード.replaceWith(置換後ノード)

サンプル

<div id="box" style="border: 1px solid black;">
    <p id="text">TEXT</p>
</div>

<script type="text/javascript">
    let element = document.getElementById("text");
    
    let node = document.createElement('p');
    node.textContent = 'Hello World';
    
    ___ih_hl_start
    element.replaceWith(node);
    ___ih_hl_end
</script>

置換後のHTML構造イメージは次のようになります。

<div id="box" style="border: 1px solid black;">
    <p>Hello World</p>
</div>

子ノード（replaceChild）

子ノードを別のノードに置換するにはreplaceChildメソッドを使用します。

基本構文

要素ノード.replaceChild(置換後ノード, 置換前ノード)

サンプル

<div id="box" style="border: 1px solid black;">
    <p id="text">TEXT</p>
</div>

<script type="text/javascript">
    let element = document.getElementById("box");
    let node_beofre = document.getElementById("text");
    
    let node_after = document.createElement('p');
    node_after.textContent = 'Hello World';
    
    ___ih_hl_start
    element.replaceChild(node_after, node_beofre);
    ___ih_hl_end
</script>

置換後のHTML構造イメージは次のようになります。

<div id="box" style="border: 1px solid black;">
    <p>Hello World</p>
</div>

移動

ノードの移動は追加メソッドを使用して実現可能です。

既存ノードを別の位置に追加すると、元の位置から移動します。

<div id="box1" style="border: 1px solid black;">
    <p id="text1">TEXT1</p>
    <p id="text2">TEXT2</p>
</div>
<hr>
<div id="box2" style="border: 1px solid black;">
    <p id="text3">TEXT3</p>
</div>

<script type="text/javascript">
    
    let target = document.getElementById('text2');
    
    let element = document.getElementById("box2");
    
    ___ih_hl_start
    element.prepend(target);
    ___ih_hl_end
</script>

移動後のHTML構造イメージは次のようになります。

<div id="box1" style="border: 1px solid black;">
    <p id="text1">TEXT1</p>
</div>
<hr>
<div id="box2" style="border: 1px solid black;">
    <p id="text2">TEXT2</p>
    <p id="text3">TEXT3</p>
</div>

削除

ノードの削除は要素ノードのメソッドを使用します。

複数のメソッドが備わっており、種類によって削除対象が異なります。

ノード自身（remove）

ノード自身を削除するには、removeメソッドを使用します。

基本構文

要素ノード.remove()

サンプル

<div id="box" style="border: 1px solid black;">
    <p id="text1">TEXT1</p>
    <p id="text2">TEXT2</p>
</div>

<script type="text/javascript">
    let element = document.getElementById("text1");
    
    ___ih_hl_start
    element.remove();
    ___ih_hl_end
</script>

削除後のHTML構造イメージは次のようになります。

<div id="box" style="border: 1px solid black;">
    <p id="text2">TEXT2</p>
</div>

子ノード（removeChild）

子ノードを削除するにはremoveChildメソッドを使用します。

基本構文

要素ノード.removeChild(子ノード)

サンプル

<div id="box" style="border: 1px solid black;">
    <p id="text1">TEXT1</p>
    <p id="text2">TEXT2</p>
</div>

<script type="text/javascript">
    let element = document.getElementById("box");
    let target = document.getElementById("text1");
    
    ___ih_hl_start
    element.removeChild(target);
    ___ih_hl_end
</script>

削除後のHTML構造イメージは次のようになります。

<div id="box" style="border: 1px solid black;">
    <p id="text2">TEXT2</p>
</div>
【CSS】word-break - 単語中の改行
【コマンドライン】ユーザーのグループ確認 [ groups ]
【コマンドライン】ユーザー・グループの確認 [ getent ]
【JavaScript】イベントの伝搬 - キャプチャリング・バブリング
【JavaScript / DOM】属性ノードの取得・設定・削除 - 属性ノードを要素ノードで扱う方法
【JavaScript / DOM】ノード / textContentプロパティ - ノードのテキストを変更する
AtMarkRule
Browser
CentOS
Command
Command
CSS
Database
Development
DOM
Event
HTML
JavaScript
MarkupLanguage
MySQL
Network
OS
PHP
Programming
Property
Pseudo Class
Pseudo Element
Relational Database
Server
Standard Object
Tag