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

Posted 2023-04-13

【中文标题】如何使用 jQuery 将新的 HTML 添加到顶部？

【英文标题】：How to use jQuery to add new HTML to the top?

【发布时间】：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>

【参考方案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>