AJAXのお勉強

JavaScript appendChild(子要素追加)＠AJAX

appendChildにて、要素に対して、子要素追加することができます。

以下では、ボタンを押した時に、
divタグの要素を取得します。

新しい要素を作成し、appendChildにて追加しています。
要素は、末尾に追加されます。


<html>
<head>
<title>JavaScript appendChild</title>
<script type="text/javascript">
<!--

function append() {

    //divオブジェクト取得
    var div1 = document.getElementById("div1");
    
    //Element作成
    var elem = document.createElement("div");
    elem.id = "id";
    elem.innerHTML = "追加";
    elem.style.color = "red";

    //末尾にElementを追加
    div1.appendChild(elem);
}

// -->
</script>
</head>
<body>
<input type="button" value="追加" onclick="append();">

<div id="div1">ここに追加</div>

</body>
</html>

Copyright (C) 2008 AJAXのお勉強. All Rights Reserved.