Question

我有一个简单的 with open('smartctl.txt', 'r') as file: for x in file.readlines(): 元素，我想在其中 <div> 多个 append() 元素，每个元素都有不同的文本，从输入字段中检索。

问题是只添加了一个<span>，后面的都没有。

span

$('#add-tag').click(function(e) {
  e.preventDefault();

  let txt = $('#tag-text').val();
  const desc = (txt || '').trim();

  if (desc !== '') {
    const root = $('.tags-group');
    root.append("<a href='#' class='badge badge-primary'></a>").text(desc);
  }
});

Answer 1

问题是因为您附加了新的 <a> 元素，然后立即用 desc 中的文本覆盖了您刚刚附加到的父元素的内容。

要解决此问题，请创建 a 元素，设置其文本，然后直接附加：

const $root = $('.tags-group');

$('#add-tag').click(function(e) {
  e.preventDefault();
  let txt = $('#tag-text').val();
  const desc = (txt || '').trim();

  if (desc) {
    $('<a href="#" class="badge badge-primary"></a>').text(desc).appendTo($root);
  }
});

a { display: block; } /* only for this demo */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <div class="input-group">
    <input class="form-control" id="tag-text" type="text" placeholder="Type some tag...">
    <button type="submit" id="add-tag">
      <i class="eos-icons"></i>
      <span>Add</span>
    </button>
  </div>
  <br>
  <div class="tags-group">
    <!-- Here we insert the added tags... -->
  </div>
</div>

如何使用 jQuery 添加多个 <span> 元素？

1 个答案: