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>

但这仅在按键上创建了两行，并按点击次数更新。但删除＆＃34; $（＆＃39; .text-box＆＃39;）。文字（＆＃39; hello＆＃39; + keycheck）;＆＃34; 给出我想要的是什么。我想知道为什么会这样做，因为我刚开始学习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>

动态添加元素到HTML页面

1 个答案: