jquery - 使用 jquery 添加 HTML

Question

我有一个菜单：

<ul id="test-ul">
<li>test</li>
<li>test2</li>
</ul>

如何在第一个 li 之前和最后一个 li 之后添加以下 HTML 标记：

 <li class="first">
      <img src="http://i48.tinypic.com/sosmck.jpg" width="27" height="15"  />
    </li>

<li class="last">
      <img src="http://i48.tinypic.com/sosmck.jpg" width="27" height="15"  />
    </li>

使用jQuery？

Answer 1

这不是添加标签div的有效语法。ul但是要理解通过 Jquery 添加 html 的概念，请看这里

var str = '<div class="first"><img src="http://i48.tinypic.com/sosmck.jpg" width="27" height="15"  /></div><div class="last"><img src="http://i48.tinypic.com/sosmck.jpg" width="27" height="15"  /></div>';

$("#test-ul").append(str).prepend(str);​​​​​​​​

您可以在此处查看 Jsfiddle 示例。

Answer 2

您不应该在 之前和之后添加这些元素li。除了li嵌套在 a中的任何元素ul都是无效的 HTML。

但是，您可以在 new 中添加内容li，这将是有效的。

​$(function(){
   var $li = $("<li></li>");
   $li.html("html code...");
   $("#test-ul").append($li);
   var $li2 = $("<li></li>");
   $li2.html("different html code..");
   $("#test-ul").prepend($li2); 
});​

查看示例

Answer 3

$("#test-ul").append("html here");    // after the last li

$("#test-ul").prepend("html here");   // before the first

Answer 4

如果您想为每个人创建一个新的 LI，这将起作用。请注意，如果添加更多 div 会导致问题。

$('div').each(function() {
    var newli = $(this).html().wrap('<li></li>');
    $('#test-ul').append(newli);
});

Answer 5

var first = '<li<img src="/sosmck.jpg" width="27" height="15"  /></li>';
var last = '<li><img src="/sosmck.jpg" width="27" height="15"  /></li>';

var myItems = $("li");
myItems.prepend(first);
myItems.append(last);