AJAXのお勉強

JavaScript innerHTML＠AJAX

divタグの内容を変更します。
divタグのオブジェクトをdocument.getElementById(ID名)により取得し、
オブジェクトのinnerHTMLに変更したHTML文をセットします。

以下では、ボタンを押した時に、
divタグに設定したいHTML文を作成(tableを作成)して、
innerHTMLにセットして、内容を変更しています。


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

function setInnerHTML() {
    
    var div = document.getElementById("div1");
    var i;
    var str = "";
    
    //divタグの内容
    str = "<table border='1'>";
    
    for (i=1;i<=10;i++) {
        str += "<tr><td>" + i + "</td></tr>";
    }
    
    str += "</table>";
    
    //innerHTMLにセット
    div.innerHTML = str;
}

// -->
</script>
</head>
<body>

<input type="button" value="実行" onclick="setInnerHTML();">
<BR>
<div id="div1">
</div>

</body>
</html>

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