如何使用 jQuery 将新的 HTML 添加到顶部？答案

【问题标题】：How to use jQuery to add new HTML to the top?如何使用 jQuery 将新的 HTML 添加到顶部？
【发布时间】：2020-02-28 21:13:59
【问题描述】：

单击按钮时，我希望按更新时间 desc 将新回复添加到顶部。例如，我添加了三个回复。新回复 3 应该在顶部。

我尝试了两种方法。页面加载后，点击按钮功能似乎无法获取新添加的html。

$(document).ready(function() {
  $('[id ^="submitCommentButton"]').click(function() {

    $('#top').append('<div style="background-color:red"> New reply number </div>'); // method 1

    // $('<div style="background-color:red> New reply number </div>').insertBefore($('#reply_container').children('.each').first()); // method 2
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="top"></div>
<div id="reply_container">
  <div id="reply1" class="each">
    <div>reply1</div>
    <button type="button" id="submit1">Submit</button>
  </div>

  <div id="reply5" class="each">
    <div>reply5</div>
    <button type="button" id="submit5">Submit</button>
  </div>

  <div id="reply20" class="each">
    <div>reply20</div>
    <button type="button" id="submit20">Submit</button>
  </div>
</div>

【问题讨论】：

标签： javascript jquery html prepend

【解决方案1】：

您的代码：$('#top').append(' 会将给定的 html 添加到所选标签的 end。

你需要prepend()

$('#top').prepend('<div style="background-color:red"> New reply number </div>');

【讨论】：

【解决方案2】：

我想这就是你想要的：

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<div id="top"></div>
<div id="reply_container">    
    <div id="reply1" class="each">
    <div>reply1</div>
    <button type="button" id="submit1">Submit</button>
    </div>

    <div id="reply5" class="each">
    <div>reply5</div>
    <button type="button" id="submit5">Submit</button>
    </div>

    <div id="reply20" class="each">
    <div>reply20</div>
    <button type="button" id="submit20">Submit</button>
    </div>
</div>

 <script>
        $(document).ready(function() {
              $('button').click( function(){
              $('#reply1').prepend('<div style="background-color:red"> New reply number </div>');
          });
        });
    </script>

第二种添加HTML的方法：

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<div id="top"></div>
<div id="reply_container">    
    <div id="reply1" class="each">
    <div>reply1</div>
    <button type="button" id="submit1">Submit</button>
    </div>

    <div id="reply5" class="each">
    <div>reply5</div>
    <button type="button" id="submit5">Submit</button>
    </div>

    <div id="reply20" class="each">
    <div>reply20</div>
    <button type="button" id="submit20">Submit</button>
    </div>
</div>

 <script>
        $(document).ready(function() {
              $('button').click( function(){
              $('<div style="background-color:red"> New reply number </div>').insertBefore('#reply1');
          });
        });
    </script>

【讨论】：