jquery - Jquery：附加更复杂的html片段

Question

我想使用 jquery 将更复杂的 html 片段附加到 div。我能够做到这一点，但我怎样才能在一个附加调用中做到这一点（现在我有几个）？任何意见表示赞赏！非常感谢。例子：

<div id="container">
   <h1>Something</h1>
   <!-- Insert here -->
</div>

片段应如下所示：

var arr = []; // can contain any number of items
//to be used here:
<h4>Something h4</h4><!-- This string is static -->
<p>Some paragraf</p><!-- This string is static -->
<ul> <!-- This is dynamic -->
   <li>arr[0]</li>
   <li>arr[1]</li>
   <li>arr[2]</li>
   <li>arr[...]</li>
</ul>

Answer 1

$.each(arr, function(i,a){
    $('ul').append('<li>'+a+'</li>'); 
});

根据您的上述评论。迭代列表，将值推断为并将值a附加到新创建的列表元素。

Answer 2

您可以通过一次调用append()和 a来做到这一点map()，但不确定它是否比简单的循环更有效，但它看起来确实更酷：

var arr = ['error 1', 'error 2', 'error 3', 'error 4', 'error 5'];

$('<ul />', {id:'someID'}).append(function() {
    return $.map(arr, function(error) { return $('<li>', {text:error}) });
}).appendTo('#container');

小提琴