こんにちは、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.

最後に

いかがでしたでしょうか。

JavaScriptである要素の子ノードを置き換えたい! となった際に「replaceChild()」を知っているとググる時間を削減できます。また、同様の内容を知り合いや会社の同僚、後輩などに相談された場合にさっと答えられるようになっておくと存在価値の高い人材に一歩近づけるかもしれません。

JavaScriptは覚えることが多いですが、新しいことを知っていくことでコーディングが楽しくなります。皆さんもMDNを参考に新しい文法を少しずつ覚えていきましょう!

以上、JavaScriptのreplaceChild()で指定した要素の子ノードを置き換える方法のご紹介でした!