@ JavaScript

DOM:ノードを置き換える

replaceChild() メソッド

ノードを置き換えるメソッドです。新しいノード、古いノードの順で引数を指定します。

format

置き換えられたノード = 親ノード.replaceChild(新しいノード,古いノード);

replacechild_01.html

<div id="container">
  <h1 id="headline">見出しレベル1</h1>
  <p>段落1つ目</p>
</div>

<script>
var newText = document.createTextNode("新しいテキスト");
var container = document.getElementById("container");
var headline = document.getElementById("headline");
container.replaceChild(newText, headline);
</script>

replaceChild() メソッドでは、removeChild() メソッドのように直接の子要素でなければ置き換えることができません。そこで parentNode を使い、自動的に親要素を取得するfunction を作っておくと便利です。

replacechild_02.html

<div id="container">
  <h1 id="headline">見出しレベル1</h1>
  <p>段落1つ目</p>
</div>

<script>
function replaceNode(newNode, oldNode) {
  var parent = oldNode.parentNode;
  return parent.replaceChild(newNode, oldNode);
}
var newText = document.createTextNode("新しいテキスト");
replaceNode(newText, headline);
</script>