##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>
###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);
}
参考:MDN オブジェクト参照
####let parentNode = oldList.parentNode;
:::note warn
親ノードulの参照を変数parentNodeへ代入する。
:::
####parentNode.replaceChild(newList, oldList);
:::note warn
既存ノードoldListを新規に作成したli要素の'newList'と置換する。
:::
###ブラウザでの検証 実際にブラウザにて挙動を確認していく。 
検証の結果、
置換ボタンをクリックしすると、li要素のテキストが入れ換わるようになった。
##4. おわりに
次項:JavaScript DOM操作⑧ 「ノードの削除」に続く。