ももの知恵の樹

Ajax-HTMLにデータを書き込む

Ajax-HTMLにデータを書き込む

HTMLについて

HTMLのどの部分にデータを書き込むのかを示すために<div>要素をHTMLにあらかじめ記述しておきます。

ノードを取得するための識別子として<div>要素にIDを設定します。

IDは任意でかまいません。 


<div id="message"></div>

書き込み処理について

書き換える方法はDOMを用いて対象となるノードを取得し、「innerHTML」プロパティで値を書き換えます。 


var node = document.getElementById("message");
node.innerHTML = "変更後のテキスト";

実行サンプル


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <script type="text/javascript">
 <!--
 var xmlHttp;
 function loadText(){
   xmlHttp = new XMLHttpRequest();
   xmlHttp.onreadystatechange = checkStatus;
   xmlHttp.open("GET", "http://wirerose/test/memo.txt", true);
   xmlHttp.send(null);
 } 
 function checkStatus(){
   if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
     var node = document.getElementById("message");
     node.innerHTML = xmlHttp.responseText;
   }
 }
 // -->
 </script>
 <title>データ書き込み</title>
</head>
<body>
 <h1>データ書き込み</h1>
 <form>
 <input type="button" value="ファイルを読み込む" onClick="loadText()">
 </form>
 <div id="message">メッセージ</div>
</body>
</html>


関連ページ