javascript - 如何使用 jQuery 将 HTML `` 添加到 ``？

Question

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

代码片段:

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

您正在调用原始 DOM prepend(仅存在于现代浏览器中)，因为 lists[i] 访问原始 ul元素。您还只是采用了您想要添加的内容的 text，而不是包括任何 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>