AJAXを使用して、DOMにまだロードされていない要素のinnerHTMLを設定するにはどうすればよいですか？

Question

ブログフィードのタイトルリストを表示するメインフィードがあります。タイトルをクリックすると、ブログの投稿の詳細を新しいhtmlファイルに表示する必要があります。以下は私の現在のコードされています

window.location.href = "/viewpost.html"; 


    postID = this.id; 


    if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
    } else { 
     // code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      document.getElementById("view-post-container").innerHTML = xmlhttp.responseText; 
     } 
    }; 


    xmlhttp.open("GET", "viewpost.php?q=" + postID, true); 
    xmlhttp.send(); 

問題があり、要素ビュー-後の容器は、ファイルviewpost.htmlである、と私はPHPファイルがアクセスすることができないと思います。私は現在のページ（index.php）にデータを表示するだけですが、各投稿ごとに個別のページを作成したいので、SEOや共有のための動的URLの設定方法を最終的に学ぶことができます。最終的な目標は動的なURLを持つことなので、より良いアプローチがあるかもしれません。どんな助けでも大歓迎です。ありがとう。

Answer 1

ちょうどこれを試して、あなたがwindow.onload機能上に

window.onload = function() { 
    if (window.XMLHttpRequest) { 
     xmlhttp = new XMLHttpRequest(); 
    } else { 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      document.getElementById("view-post-container").innerHTML = xmlhttp.responseText; 
     } 
    }; 
    xmlhttp.open("GET", "viewpost.php?q=" + postID, true); 
    xmlhttp.send(); 
} 

をあなたのコードを配置する必要があります