在 <ul> 中动态添加 <li></li> ，其中 <li> 中包含 <img> 标签

Question

在 ul 标签之后，我想在 javascript 中调用函数来动态添加列表项，在里面我想放置图像标签，如下所示。

<li> <img src="images/testpic" height="200px" width="200px" /> </li> 

我在 jquery 中使用了 .append() 方法但不起作用

<script type="text/javascript">
                '$('ul').append("<li><img src='thumbs/image"+i+".jpg' width='175' height='175' /></li>");
                '$('ul').append("<li><img src='thumbs/image"+i+".jpg' width='175' height='175' /></li>");
                '$('ul').append("<li><img src='thumbs/image"+i+".jpg' width='175' height='175' /></li>");

Answer 1

从 for 循环

for ( var i = 0; i < 10; i++ ) {
    $("<li>",{ html:'<img src="http://placekitten.com/100/100?image='+i+'" />' })
        .appendTo("#images");   
}?

来自一系列图像

如果您只想添加带有图像的列表项：

// You have a mention of i in your example, so I assume you are
// cycling over some sort of list - so I'll do the same
?var images = [ 'http://placekitten.com/50/50', 
               'http://placekitten.com/50/50?image=2' ];

// You had some malformed markup in your code, the following keeps it simple
?????????????????????????????????$.each( images, function( i, v ) {
    $("<li>", { html: '<img src="' + v + '" />' }).appendTo("#images");        
});?

小提琴：http : //jsfiddle.net/YwH7Z/