Как использовать jQuery для добавления новых HTML в начало?

Question

Когда кнопка нажата, я хочу, чтобы новый ответ был добавлен в начало к времени обновления des c. Например, я добавил три ответа. Новый ответ 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>

Answer 1

Я думаю, это то, что вы хотите:

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

Answer 2

Ваш код: $('#top').append(' добавит указанный html к концу выбранного тега.

Вам необходимо prepend ()

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