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

【问题标题】：How to add multiple <span> elements with jQuery?如何使用 jQuery 添加多个 <span> 元素？
【发布时间】：2021-05-05 18:46:52
【问题描述】：

我有一个简单的<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);
  }
});

<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">add</i>
      <span>Add</span>
    </button>
  </div>
  <br>
  <div class="tags-group">
    <!-- Here we insert the added tags... -->
  </div>
</div>

【问题讨论】：

标签： html jquery text append

【解决方案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>

【讨论】：