在li元素中添加ul

Question

我不能为我的生活解决为什么会这样。

这是我所看到的一个小提琴：

https://jsfiddle.net/258xsLsp/

以下是HTML示例：

<ul>
  <li id="test1">Magazines</li>
  <li id="test2">Topics</li>
</ul>

......和JS：

$(document).ready(function() { 
  $("<ul>").appendTo("#test1");
  $("<li>foo</li>").appendTo("#test1");
  $("</ul>").appendTo("#test1");
});

...以及我正在寻找的输出：

<ul>
   <li id="test1" data-cat-id="5817">Magazines
      <ul>
        <li>foo</li>
       </ul>
    </li>
    <li id="test2" data-cat-id="2000000">Topics</li>
</ul>

......但我得到的是：

<ul>
  <li id="test1" data-cat-id="5817">Magazines<ul></ul><li>foo</li></li>
  <li id="test2" data-cat-id="2000000">Topics</li>
</ul>

我一定是想念一些蠢事！我已经尝试了append（）和appentTo（），似乎都不想工作。

Answer 1

或者你可以这样：

$("<ul>").append("<li>foo</li>").appendTo('#test1')

Answer 2

您要将<li>foo</li>追加到#test1。您应该将其附加到#test1 ul，如下所示。

＆＃13;

＆＃13;

$(document).ready(function () {
    $("<ul/>").appendTo("#test1");
    $("<li>foo</li>").appendTo("#test1 ul"); // change here
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li id="test1">Magazines</li>
    <li id="test2">Topics</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

此示例使用.append()而非.appendTo()

你将它们都附加到#test1，这将把它们一个接一个地放在一起。在下一个列表项中，您可以将ul存储在变量中，以便随后附加到变量中。

$(document).ready(function() { 
  var topNode= $('<ul></ul>'); //create and store the ul (not we have not inserted it into the dom yet)
  topNode.append('<li>foo</li>'); //append the inner list item to our stored ul
  $('#test1').append(topNode);  //append the whole thing to the first list item (into the dom)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="test1" data-cat-id="5817">Magazines</li>
  <li id="test2" data-cat-id="2000000">Topics</li>
</ul>