##1. はじめに
本記事では、JavaScript DOM操作の
「ノードの置換」
について記載する。
##2. ノードの置換
###replaceChild
####説明
指定した子ノードを置き換える。
####構文

index.js

replaceNode = parentNode.replaceChild(newChild, oldChild);

上記構文の内約は以下の通り。

replaceNode:置き換えられたノード

parentNode:置き換え対象の親ノード

newChild:置き換え後のノード

oldChild:置き換え対象のノード

#####補足
この構文は、newChildとoldChildを入れ換える動作である。
言い換えると、
appendChildとremoveChildを同時に行う。
###実際の挙動

HTML内のli要素に関して、デフォルトは「古い要素です。」とあり、
置換ボタンをクリックしたら「新しい要素です。」というテキストに入れ替わる。

##3. 例題 ###内容 :::note warn リストとボタンを配置し、ボタンをクリックしたらリストの子要素を置換する処理を記述する。 ::: ###実践前のチュートリアル実践に入る前に、完成形を先に表示しておく。 ※流れとしては、上記で説明した[実際の挙動](https://qiita.com/Stack_up_Rising/items/b3389a71d82a52207c16#%E5%AE%9F%E9%9A%9B%E3%81%AE%E6%8C%99%E5%8B%95)を参照

仕組みとしては、以下のようになっている。

ボタンをクリックしたら、リスト内で記述したテキストが入れ換わる。

###マークアップブラウザに置換前の文字をブラウザへ表示しないといけないので、HTMLの作成から取り掛かる。

index.html

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li id="oldList">古い要素です。</li>
    </ul>
    <input type="button" value="置換" onclick="replace()" />

    <script src="js/index.js"></script>
  </body>
</html>

マークアップしブラウザで表示すると以下のようになる。 ![スクリーンショット 2021-11-12 14.41.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/3c9a561f-6b5c-2145-6c5e-1ee56690524a.png)

###JavaScriptの記述次にJavaScriptを仕上げていく。

index.js

index.js

function replace() {
  let newList = document.createElement('li');
  newList.setAttribute('id', 'newList');
  let newText = document.createTextNode('新しい要素です。');
  newList.appendChild(newText);
  let oldList = document.getElementById('oldList');
  let parentNode = oldList.parentNode;
  parentNode.replaceChild(newList, oldList);
}

上記構文に関して、順を追って解説していく。 ####function replace() :::note warn HTML内のinputタグにあるonclick属性のreplaceで関数を作成していく。 ::: ####let newList = document.createElement('li'); :::note warn 空のli要素を作成していく。 ::: ####newList.setAttribute('id', 'newList'); :::note warn 生成したノードにid属性'newList'を付与する。 ::: #####setAttribute :::note alert 指定の要素に新しい属性を追加する。 ::: :::note alert 指定の要素に存在する属性の値を変更する。 ::: ####let newText = document.createTextNode('新しい要素です。'); :::note warn テキストノードを生成する。 ::: ####newList.appendChild(newText); :::note warn 生成したノードを空のli要素の子ノードとして追加する。 ::: ####let oldList = document.getElementById('oldList'); :::note warn 置換前の変数oldListの参照※を変数oldListに代入する。 ::: ※参照:オブジェクトリンクのこと。

参考:MDN オブジェクト参照

####let parentNode = oldList.parentNode;
:::note warn
親ノードulの参照を変数parentNodeへ代入する。
:::
####parentNode.replaceChild(newList, oldList);
:::note warn
既存ノードoldListを新規に作成したli要素の'newList'と置換する。
:::

###ブラウザでの検証実際にブラウザにて挙動を確認していく。 ![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/d57a3e64-f223-cd7c-b5ef-c53b6bbb7efa.gif)

検証の結果、

置換ボタンをクリックしすると、li要素のテキストが入れ換わるようになった。

##4. おわりに
次項:JavaScript DOM操作⑧ 「ノードの削除」に続く。