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

Question

NOTE: please Don't mark this question [duplicate]

I am trying to create Blog posts dynamically using php on my website. The problem is that when the response is received by the browser it is not able to put the blogPosts inside the section Tag on my web site using 'innerHTML'

Here is my HTML code:

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

CSS code:

#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 code:

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;

And PHP code:

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

?>

I am trying to fix this from past 2 days and after surfing most of the questions were "the case-sensitive" error.

Answer 1

as @Patrick Evans mentioned You are using an async method, the request hasn't finished by the time your innerHTML line is reached

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