@ JavaScript

DOM:ノードの追加と移動

appendChild() メソッド

appendChild() はDOMツリーに子ノードを追加するメソッドです。追加したノードは、要素の中で最後の子ノードとして追加されます。

appendchild_01.html

<div id="container"></div>

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

appendChild() は新しく作ったノードを追加するだけでなく、特定要素の移動もできます。

appendchild_02.html

<div id="container">container</div>
<div id="target">target</div>

<script>
var container = document.getElementById("container");
var target = document.getElementById("target");
container.appendChild(target);
</script>

insertBefore() メソッド

特性のノードの途中に追加する場合は insertBefore() メソッドを使います。insertBefore() では2つの引数が必要です。

format

親ノード.insertBefore(新しいノード,ターゲットノード);

insertbefore.html

<div id="container">
  <div id="target"></div>
</div>

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