附加元素没有显示CSS ISSUE JAVASCRIPT PHP

I have experiencing some problems with fetching the grandchilds from my db table: referrals. However, it seems that my code can actually fetch the usernamee of my grandchilds. But it is not appearing below my child's line and there is no error in INSPECT.

Please see the OUTPUT image I attached here: Attached here are the images of the output of my code:

This is the UPDATED database table name referrals:

I used Javascript to fetch the data's inside "referrals" table

<!-- GENEOLOGY TREE -->
    <div class="tree">
       <?php $id = 1; ?>
          <ul>
             <li>
               <div id="parent_account"><a href="#"><img src="user.png" alt="Avatar" style="width:50px"/></br>Parent<?php echo $id; ?></a></div>
             </li>
        </ul>
      </div>
<!-- END OF GENOLOFY TREE -->


  <script>
$(document).ready(function(){
    // start get children
    var _id = "<?php echo $id ?>";
    var child = "";
    var child_id = [];
    var gchild_id = [];
    var count = 0;

    $.post('get_child_referrals.php', { id:_id }).done(function(response){
        var response = jQuery.parseJSON(response);
        var referred = response["referred"];
        var referred_len = response["referred"].length;
        if(referred_len > 0){
            child += "<ul>";
            for(var x = 0; x < referred_len; x++) {
                console.log(referred[x]["usernamee"]);
                count += 1;
                child_id[x] = referred[x]["id"];
                child += "<li id='child"+x+"'><a href="+x+"><img src='user.png' alt='Avatar' style='width:50px'/><br>Child "+referred[x]["usernamee"]+"</a></li>";
            }
            child += "</ul>";
            console.log(child);
            $("#parent_account").append(child);
            // start get grandchildren
        // console.log(child_id);
        var gchild_len = child_id.length;
        // console.log(gchild_len);
        for(i = 0; i < gchild_len; i++){
            gchild = "";
            _id = child_id[i];
            // console.log(_id);
            $.post('get_child_referrals.php', { id:_id }).done(function(response){
                gresponse = jQuery.parseJSON(response);
                greferred = gresponse["referred"];
                greferred_len = gresponse["referred"].length;
                if(greferred_len > 0){
                    gchild += "<ul>";
                    for(y = 0; y < greferred_len; y++) {
                        gchild_id[y] = greferred[y]["id"];
                        console.log(greferred[y]["usernamee"]);
                        gchild += "<li id='gchild"+y+"'><a href="+y+"><img src='user.png' alt='Avatar' style='width:50px'/><br>Child "+greferred[y]["usernamee"]+"</a></li>";
                    }
                    gchild += "</ul>";
                    console.log($("#child"+i).length);
                    console.log(gchild);
                    $("#child"+i).append(gchild);
                }
            });
        }
        // end get grandchildren
        }
    });
    // end get children
});
</script>​

get_child_referrals.php

include('connectdb.php');
$response = array();
$response["referred"] = array();
$id = $_POST['id'];
$sql = "SELECT * FROM referrals WHERE referral_id='$id'"; // MY RECRUITERS
$result = $conn->query($sql);
while($data = $result->fetch_assoc()) {
                array_push($response["referred"], $data);
}
echo json_encode($response);

For more info, this is my logs on my inspect console:

First,Inspect for the username.Check if its coming in HTML.Sometimes, it is rendered but hidden.Secondly, just just console the child element,to confirm you are appending it to the right one.

console.log($(child));

I tried your code in my local, and got an output as in the pic.Check if its something that you want to get.

So looking at your console, this line console.log($("#child"+i).length); appears to be returning 0 which would mean that the element in question doesn't seem to exist.

Can you log this without the .length and make sure that it is still getting the right element.