element.appendChild( newNode )は、「element」に指定した要素内に、引数「newNode」に指定したノードを追加するメソッド。既に子ノードがある場合、子ノードリストの最後に追加する。
構文
var $appendedNode = $elementNodeReference.appendChild( newNode );
引数
- newNode
- 追加するノードを指定。
戻り値
追加したノード。引数「newNode」と同じ。
サンプル
- 項目Ａ
- 項目Ｂ
サンプルの動作について
「sample()」ボタンをクリックすると、ボタンの下のリストの「項目Ｂ」の次に「新項目1」を追加する。
「sample()」ボタンをクリックする度に、「新項目2、新項目3、新項目4…」のように連番付きで項目を追加する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
var $count = 1;
function sample() {
var $newElement = document.createElement( "LI" );
var $textNode = document.createTextNode( "新項目" + $count++ );
$newElement.appendChild( $textNode );
var $elementNodeReference = document.getElementById( "sample" );
$elementNodeReference.appendChild( $newElement );
}
</script>
var $count = 1;
function sample() {
var $newElement = document.createElement( "LI" );
var $textNode = document.createTextNode( "新項目" + $count++ );
$newElement.appendChild( $textNode );
var $elementNodeReference = document.getElementById( "sample" );
$elementNodeReference.appendChild( $newElement );
}
</script>
HTML
<p><button onclick="sample();">sample()</button></p>
<ol id="sample">
<li>項目Ａ</li>
<li>項目Ｂ</li>
</ol>
<ol id="sample">
<li>項目Ａ</li>
<li>項目Ｂ</li>
</ol>