jQuery追加不显示每个方法的html答案

【问题标题】：jQuery append not displaying html with each methodjQuery追加不显示每个方法的html
【发布时间】：2020-07-04 23:48:16
【问题描述】：

我有一个元素列表。

<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 类，但它显示如下：

一个[对象对象]
两个[对象对象]
三个[object Object]

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

【问题讨论】：

标签： jquery append each

【解决方案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元素对象并在value上使用appendChild()：

$(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>');

【讨论】：

谢谢！你在这里给了我很多有用的见解。

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

【讨论】：

【解决方案3】：

只需更改代码中的一行，其他一切正常。

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

【讨论】：