Wie setze ich mit einem AJAX den innerHTML eines Elements, das noch nicht im DOM geladen ist?

Question

Es gibt einen Haupt-Feed mit einer Liste von Blog-Post-Titeln. Wenn auf einen Titel geklickt wird, muss ich die Details des Blogposts in einer neuen HTML-Datei anzeigen. Im Folgenden finden Sie meinen aktueller Code:

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(); 

Das Problem ist, das Element Ansicht-Post-Container, in der Datei viewpost.html ist, und so glaube ich nicht, die PHP-Datei zugreifen kann. Ich würde nur die Daten auf der aktuellen Seite (index.php) anzeigen, aber ich wollte einzelne Seiten für jeden Beitrag haben, damit ich schließlich lernen kann, wie man dynamische URLs für SEO und gemeinsame Zwecke hat. Das Endziel ist dynamische URLs, also gibt es vielleicht einen besseren Ansatz? Jede Hilfe wird sehr geschätzt. Vielen Dank.

Answer 1

versuchen nur dies, Sie haben in auf Ihren Code setzen window.onload Funktion

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(); 
}