【JavaScript】replaceChild()で指定した要素の子ノードを置き換える

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptのreplaceChild()で指定した要素の子ノードを置き換える方法をご紹介しています。

JavaScriptである要素が持っている「テキスト」や「画像」や「要素」そのものを置き換えたい！　といったケースで有効な方法になります。

では、解説していきます。

replaceChild()について

replaceChild()はNodeが持つメソッドです。指定したノードが持っている子ノードを新しいノードに置き換えることができます。

置き換える方法は簡単です。置き換えたいノードを持つ親を取得してメソッドを指定するだけです。

下記がreplaceChild()の構文です。

var el = document.getElementById("app");
replacedNode = el.replaceChild(newNode, oldNode);

上記の処理内容は「el」が持っている「oldNode」を「newNode」に置き換えるといった流れになります。実行した結果、置き換えられたノードを返り値として得ることができます。

replaceChild()に指定できる引数と返り値は下記の通りです。

newNode	oldNodeと置き換える新しいノードを指定します。
oldNode	置き換えられる既存のノードを指定します。
replacedNode	返り値の置き換えられたノードが代入されます。

replaceChild()の概要がわかったところで、実際に使用してノードを置き換えてみたいと思います。

replaceChild()で指定した要素の子ノードを置き換える

では早速置き換えていきましょう。

本記事では、下記HTMLの「h1」を「h2」に置き換えるサンプルを作成して、replaceChild()の使い方をご紹介していきます。

<div id="app">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

置き換える新しいノードにはテキストノードを設定します。ノードを置き換える流れは下記のようなイメージです。

置き換えるノードを持つ親要素を取得する
置き換える既存ノードを取得する
置き換える新しいノードを生成する
新しいノードに持たせるテキストノードを生成する
新しいノードにテキストノードを追加する
既存ノードと新しいノードを置き換える

では、上記の処理が実装できるようにスクリプトを書いていきます。

//置換するノードを持っている要素を取得する
var el = document.getElementById("app");

//置換する既存ノードを取得する
var oldNode = el.getElementsByTagName("h1")[0];

//置換する新しいノードを生成
var newNode = document.createElement("h2");

//生成した新しいノードに持たせるテキストを生成
var newNodeContent = document.createTextNode("New Lorem ipsum");

//新しいノードにテキストノードを追加
newNode.appendChild(newNodeContent);

//置換を実行する
el.replaceChild(newNode, oldNode);

以上でノードの置き換え処理の完成です。下記にデモを用意しておりましたので、ボタンをクリックしてタイトルを置き換えてみていただければと思います。

See the Pen
replaceChild()｜JavaScript by ryohei (@intotheprogram)
on CodePen.