2012-02-18 4 views
1

これを行うにはどうしますか?私のajaxはjavascript変数を設定しますが、document.writeを使用して表示しようとすると、html要素をカバーします。私はjavascript変数を使用することができ、html要素を隠すことができないようにこれを行うことができますか?前もって感謝します。javascript変数を設定するAjaxレスポンスがhtml要素をカバーしています

<html> 
<head> 
<title>Log In</title> 

<!-- script tag for ajax jquery --> 
<link href='style.css' type="text/css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js" type="text/javascript"></script> 

<script type="text/javascript"> 


$(document).ready(function() 

       { 
       //Get Data ajax function 
       $.post(
        'getData.php', 
        { 

        },           
        function(response) 
        { 
        $('#name').html($('#1' , response).html()); 
        $('#sname').html($('#2' , response).html()); 

        var x = $('#1' , response).html(); 
        document.write(x); 

        }) 

       return false; 
       }) 

</script> 

</head> 

<body> 

<div id="name"></div> 
<div id="sname"></div> 

this is text that get covered up, as well as any other html elements 


</body> 

</html> 
+0

最初はなぜdocument.write()を使用していますか、そして2番目の理由でそれをに書き込もうとしていますか? jQueryが 'ready'メソッドを実行すると、そのページはすでにロードされており、HTMLストリームは閉じられています。 – Robusto

答えて

2

document.writeページの読み込み中に主に使用ためのものです。イベントに応答するときは、createElementappendChildなどの関数を使用してDOMを変更します。またはinnerHTMLのようなプロパティ。例えば

あなたの代わりに

document.write(x); 

の、div内のマークアップとしてあなたxのコンテンツを追加したい場合、あなたはこれを行うだろう:あなたはしたい場合

var div = document.createElement('div'); 
div.innerHTML = x; 
document.body.appendChild(div); 

が既にDOMにあり、それを修正する場合は、IDがある場合はdocument.getElementById、それ以外の場合はdocument.getElementsByTagNameとすると、指定されたタグを持つ要素のリストを取得できますDOM2の部分)、またはselectors APIquerySelectorおよびquerySelectorAll(現在のブラウザーの大部分ではありますが、すべてではありません)。

もっと読み:

2

ですから、Jを使用しているので、他の人が強調表示した理由のために、照会、あなたはdocument.writeを使用すべきではありません。これを代わりに使用してください:

$(document).ready(function() 

      { 
      //Get Data ajax function 
      $.post(
       'getData.php', 
       { 

       },           
       function(response) 
       { 
       $('#name').html($('#1' , response).html()); 
       $('#sname').html($('#2' , response).html()); 

       var x = $('#1' , response).html(); 
       // Use .append() instead of document.write() 
       $('body').append(x); 
       }) 

      return false; 
      }) 

これで、既存のデータを失うことはありません。

関連する問題