如何將[object，object]的數組轉換爲html（）？

Question

我似乎無法想出解決辦法：

$(".task:last").append( 

$("<div/>", {class: 'clear'}) + 
$("<div/>", {class: 'time', text: '3:30pm'}) + 
$("<div/>", {class: 'clear'}) 

) 

不幸的是，這回來的一堆[目標，對象]的。我如何追加HTML？

Answer 1

var first = $("<div/>", {"class": 'clear'}), 
    second = $("<div/>", {"class": 'time', text: '3:30pm'}), 
    third = $("<div/>", {"class": 'clear'}) ; 
$(".task:last").append(first, second, third); 

你還可以嘗試：

$(".task:last").append( 
    $("<div/>", {class: 'clear'}), 
    $("<div/>", {class: 'time', text: '3:30pm'}), 
    $("<div/>", {class: 'clear'}) 
); 

使用數組：

var element = [ 
    $("<div/>", {class: 'clear'}), 
    $("<div/>", {class: 'time', text: '3:30pm'}), 
    $("<div/>", {class: 'clear'}) 
]; 

$.each(element, function() { 
    this.appendTo('.task:last'); 
}); 

或

$.each(element, function() { 
    $('.task:last').append(this); 
}); 

注：

不是class: 'clear'，應該是'class': 'clear'或className: 'clear'。因爲class是保留關鍵字。

Answer 2

 $(".task:last").append($("<div/>", { class: 'clear' })); 
     $(".task:last").append($("<div/>", { class: 'time', text: '3:30pm' })); 
     $(".task:last").append($("<div/>", { class: 'clear' })); 

//或

$(".task:last").append($("<div/>", { class: 'clear' }), $("<div/>", { class: 'time', text: '3:30pm' }), $("<div/>", { class: 'clear' })); 

Answer 3

var elms = [$("<div/>", {className: 'clear'}), 
      $("<div/>", {className: 'time', text: '3:30pm'}), 
      $("<div/>", {className: 'clear'}) 
      ]; 

$(".task:last").append(elms[0], elms[1], elms[2]);​ 

FIDDLE

或

var elms = [$("<div/>", {className: 'clear'}), 
      $("<div/>", {className: 'time', text: '3:30pm'}), 
      $("<div/>", {className: 'clear'}) 
      ]; 

$.each(elms, function() { 
    $(this).appendTo(".task:last"); 
}); 
​ 

Answer 4

var t = '3:30pm'; 
var $el = '<div class="clear" /><div class="time"> Time: '+t+'</div><div class="clear" />'; 
    $(".task:last").append($el); 

http://jsbin.com/izegut/edit#javascript,html,live