如何使用jQuery將HTML“<li>”添加到“<ul>”？

Question

我需要在jQuery中使用for-loop將<li>元素附加到多個<ul> 。

代碼片段：

JQuery的：

var lists = $('ul.menu');

for(var i=0; i<lists.length; i++){
    var lnk = "<li>All</li>";
    lnk = $('<div />').html(lnk).text();
    lists[i].prepend(lnk);
}

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
    <li>Graphics</li>
    <li>Videos</li>
    <li>Programming</li>
</ul>
<hr>
<ul class="menu">
    <li>Our Story</li>
    <li>About Us</li>
</ul>

根據代碼<li>插入正確的文本，但格式為純文本而不是<li> 。

我究竟做錯了什么？ 如何糾正我的錯誤？

Answer 1

比TJ Crowder的解決方案更多的jQuery-ish替代品......

 $('ul.menu').each(function() { $(this).prepend("<li>All</li>"); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="menu"> <li>Graphics</li> <li>Videos</li> <li>Programming</li> </ul> <hr> <ul class="menu"> <li>Our Story</li> <li>About Us</li> </ul> 

Answer 2

您正在調用原始DOM prepend （僅存在於現代瀏覽器中），因為lists[i]訪問原始ul元素。 你也只是把你想要的內容添加到文本中，而不是包含任何li標記。 你可能想：

1. 調用jQuery的prepend ，然后

2. 將li包含在您預先添加的內容中

例：

 var lists = $('ul.menu'); for(var i=0; i<lists.length; i++){ var lnk = "<li>All</li>"; lists.eq(i).prepend(lnk); } 

 /* No CSS */ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="menu"> <li>Graphics</li> <li>Videos</li> <li>Programming</li> </ul> <hr> <ul class="menu"> <li>Our Story</li> <li>About Us</li> </ul>