element.replaceChild( newChildNode, oldChildNode )は、「element」に指定した要素の子ノードのうち、引数「oldChildNode」に指定したノードを、引数「newChildNode」に指定したノードに置き換えるメソッド。
構文
var $replacedNode = $elementNodeReference.replaceChild( newChildNode, oldChildNode );
引数
- newChildNode
- 新しいノードを指定。
- oldChildNode
- 「newChildNode」に置き換えるノードを指定。
戻り値
置き換えられたノード。引数「oldChildNode」と同じ。
サンプル
0
サンプルの動作について
「カウントアップ」ボタンをクリックする度に、ボタンの右横の数値をカウントアップする。
サンプルのソースコード
JavaScript
<script type="text/javascript">
var $count = 0;
function sample() {
var $newChildNode = document.createTextNode( ++$count );
var $elementNodeReference = document.getElementById( "sample" );
$elementNodeReference.replaceChild( $newChildNode, $elementNodeReference.childNodes[0] );
}
</script>
var $count = 0;
function sample() {
var $newChildNode = document.createTextNode( ++$count );
var $elementNodeReference = document.getElementById( "sample" );
$elementNodeReference.replaceChild( $newChildNode, $elementNodeReference.childNodes[0] );
}
</script>
HTML
<p>
<button onclick="sample();">カウントアップ</button>
<span id="sample">0</span>
</p>
<button onclick="sample();">カウントアップ</button>
<span id="sample">0</span>
</p>