为什么 innerHTML 不能通过 AJAX 处理响应文本中的 Html 元素？

Question

注意：请不要标记此问题[重复]

我正在尝试在我的网站上使用 php 动态创建博客帖子。问题是，当浏览器收到响应时，它无法使用 'innerHTML'

将 blogPosts 放入我网站上的标签部分

这是我的 HTML 代码：

<section id="contentSection">
</section>
    <button name="LOAD_MORE_REQUEST" id="LoadMoreButton" onclick="loadContent();" value="loadMoreButton">Load more</button>

CSS代码：

#contentSection{
                height: 1000px;
                width: 100%;
                background-color: white;
                overflow: scroll;
            }

            .ArticleSection1{
                height: 450px;
                width: 48%;
                float: left;
                margin-left: 1.3%;
                margin-bottom: 30px;
                box-shadow: 0px 0px 10px 4px rgb(180, 180, 180);
            }
            .imageDivArticleSection1{
                height: 50%;
                width: 100%;
                overflow: auto;
            }
            .PreviewTextDiv{
                height: 50%;
                width: 100%;
                overflow: auto;
                background-color: rgba(255, 255, 255, 0.904);
            }
            .ArticleSection1 > div > h1{
                padding-left: 2%;
                padding-top: 15px;
                font-size: 28px;
                float: left;
                font-weight: 100;
                display: table-cell;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            }
            .PreviewTextDiv{
                padding-left: 2%;
                padding-top: 15px;
                font-size: 16px;
                float: left;
                font-weight: 100;
                display: table-cell;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            }
            .ArticleSection1 > div > button{
                width: 20%;
                height: 40px;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                font-weight: 100;
                color: black;
                font-size: 16px;
                border: 1px solid deepskyblue;
                background-color: transparent;
                margin-left: 2%;
                margin-top: 20px;
            }

JS代码：

var loadMoreButton = document.getElementById("LoadMoreButton").value;
    var sendLoadContentRequest = new XMLHttpRequest();
    requestQuery_Data = new FormData();
    requestQuery_Data.append("LOAD_MORE_REQUEST", loadMoreButton);
    sendLoadContentRequest.open("POST", "LoadContent.php", true);
    sendLoadContentRequest.send(requestQuery_Data);
    DefaultText = document.getElementById("contentSection").innerHTML;
    response = sendLoadContentRequest.responseText;
    document.getElementsByTagName("contentSection").innerHTML = DefaultText +  response;

和PHP代码：

<?php
if(isset($_POST["LOAD_MORE_REQUEST"])){
    loadContentOnPage();
}
else{
    echo("Error");
}


function loadContentOnPage(){
    $response = '
    <section class="ArticleSection1">
    <div class="imageDivArticleSection1"></div>
    <div class="PreviewTextDiv">
        <h1>Code editors to use</h1>
        <br>
        <p>
                Though this is the era of visual presentations than the text or articles but even after that many blog-
                -ers and bloging engines use text teditors but if you are and coding your own blogging website you
                may also need to put one on your website though there are many prewritten texteditors are avilable 
        </p>
        <button>Read more</button>
    </div>
</section>
    ';

    for($a = 0; $a < 4; $a++){
        echo($response); 
    }
}

?>

我在过去 2 天尝试解决这个问题，在浏览了大部分问题后都是 "the case-sensitive" 错误。

Answer 1

如@Patrick Evans 所述，您正在使用异步方法，到达 innerHTML 行时请求尚未完成

var loadMoreButton = document.getElementById("LoadMoreButton").value;
    var sendLoadContentRequest = new XMLHttpRequest();
    requestQuery_Data = new FormData();
    requestQuery_Data.append("LOAD_MORE_REQUEST", loadMoreButton);
    sendLoadContentRequest.open("POST", "LoadContent.php", true);
    sendLoadContentRequest.send(requestQuery_Data);
    DefaultText = document.getElementById("contentSection").innerHTML;

    sendLoadContentRequest.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("contentSection").innerHTML = DefaultText +  responseText;
       }
    };

为什么 innerHTML 不能通过 AJAX 处理响应文本中的 Html 元素？

Why innerHTML is not working with Html elements in response text via AJAX?

html

javascript

php

innerhtml