動態地將元素添加到HTML頁面

Question

每次檢測到按鍵時嘗試創建一個新的列表元素。 本來我把這個寫下來的

<ul class='text-box'> <strong>THIS IS SPARTA</strong>
 </ul>
  <script>
    keycheck = 0;
    $(document).keydown(function()
    { 
        $('.text-box').text('Number of keypress are: '+keycheck);
        keycheck=keycheck+1;
        $('<p>').text(keycheck).appendTo('.text-box');
    });

    </script>

但這只會在按鍵上創建兩行，並隨點擊次數更新。 但是刪除行“ $（'。text-box'）。text（'hello'+ keycheck）;” 給我我想要的 我想知道為什么這樣做，因為我剛開始學習js，我覺得這將是很有價值的。

Answer 1

如果你這樣做

$('.text-box').text('Number of keypress are: '+keycheck);

您用給定的文本替換.text-box所有內容。 並且“所有內容”包括上次添加的內容！
因此，您需要append(...)而不是text(...) 。 而已。

但是，如果要創建列表，則應使用列表項（ <li> ），而不是純文本和<p> 。 更好的解決方案如下所示：

  keycheck = 0; $(document).keydown(function() { $('.text-box').append('<li>Number of keypresses are: ' + keycheck + '</li>'); keycheck = keycheck + 1; $('<li>').text(keycheck).appendTo('.text-box'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class='text-box'> <li>THIS IS SPARTA</li> </ul>