jQuery追加方法不显示html

Question

我有一个元素列表。

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

---

  $(function() {
    var liNodes = $("li");
    liNodes.each(function(index, value) {
      var span = $("<span></span>");
      value.append(span);
      console.log(value);
    });
  });

我想遍历li元素，向每个元素附加一个span类，但显示如下：

• 一个[对象对象]
• 两个[对象对象]
• 三个[对象对象]

我在这里做错了什么？谢谢

Answer 1

问题是因为value是Element对象，而不是jQuery对象，所以您要调用本机append()方法，而不是jQuery方法。要解决此问题，请先将value转换为jQuery对象：

$(function() {
  var liNodes = $("li");
  liNodes.each(function(index, value) {
    var span = $("<span>Foo</span>");
    $(value).append(span);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

或创建span元素对象并在appendChild()上使用value：

$(function() {
  var liNodes = $("li");
  liNodes.each(function(index, value) {
    var span = document.createElement('span');
    span.innerText = 'Foo';
    value.appendChild(span);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

说了这么多，请注意，如果您想在所有li中创建相同的元素，那么根本就不需要循环，它是单线的：

$('li').append('<span>Foo</span>');

Answer 2

希望这会有所帮助

    var liNodes = $("li");
    liNodes.each(function(index, value) {
      //var span = $("<span></span>");
      let span = document.createElement("span");
      value.append(span);
      console.log(value);
    });
  });

您可以在Here附近玩

Answer 3

只需对代码进行一行更改，其他所有内容都可以正常工作。

  var liNodes = $("li");
    liNodes.each(function(index, value) {
        var span = "<span>Foo</span>";
        $(value).append(span);
        console.log(value);
    });