javascript - 如何让加载更多数据附加到顶部？

Question

我已完成加载更多结果，但加载结果将附加在底部。我如何让它附加在顶部？

因为我发送的消息是放在底部的，所以我希望将旧消息附加到顶部。

这是我的 html:

<form name ="chatroom">

<div class="count-user-online">
<?php echo $row ?>
</div>
<div class="chatroom-upper-container" id="chatroom-upper-container">
<input type="hidden" id="result_no" value="10">
    <div id="inner">
        Loading Message....<img src="../images/loading.gif"/>
    </div>


</div>
     <input type="button" id="load" value="Load More Results">
<div class="chatroom-lower-left-container">
    <textarea class="message-setting" id="area-message" placeholder="type text" name= "msg"></textarea>
</div><div class="chatroom-lower-right-container">
    <button type="button" class="btn sendmessage-btn" onclick= "submitChat()">Send</button>
</div>

</form>

这是我的js:

$(document).ready(function(){
 $("#load").click(function(){
  loadmore();
 });
});

function loadmore()
 {
   var val = document.getElementById("result_no").value;
 $.ajax({
 type: 'post',
 url: 'chatloadmore.php',
   data: {
  getresult:val
     },
   success: function (response) {
   var content = document.getElementById("chatroom-upper-container");
   content.innerHTML = content.innerHTML+response;

  // We increase the value by 2 because we limit the results by 2
  document.getElementById("result_no").value = Number(val)+10;
 }
});
}

这是我的 loadmorefile.php:

<?php

  include '../config.php';
  include'login.php';

  $no = $_POST['getresult'];
  $username = $_SESSION['username'];

  $sql1= "SELECT * FROM (
   SELECT * FROM logs ORDER BY id DESC LIMIT $no,40
   ) sub
   ORDER BY id ASC ";

   $result1 = mysqli_query($connection,$sql1);

   while($extract = mysqli_fetch_array($result1)){
    $color = ($extract['username'] == $username) ? '    #F5F5F5' :  '#DCDCDC';
    $position = ($extract['username'] == $username) ? 'right' : 'left';
    echo "
      <div class='left-wrap-message' style='background-color:$color; float:$position;'>
      <p style='text-align:$position; margin:0;'>". $extract['username']. "  : </p> 
      <p style='text-align:$position; margin:0; text-align:left;'>  " . $extract['msg']. "</p></div>
       <div class='msg-dateandtime' style='text-align:$position;'> "  . $extract['date']. "</div>";
     }

    ?>

Answer 1

代替

content.innerHTML = content.innerHTML+response;

做一个

content.innerHTML = response + content.innerHTML;