Question

I can’t seem to figure this out :

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

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

)

Unfortunately, this comes back as a bunch of [object, Object]. How do I append the 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);

You can also try:

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

Using Array:

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

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

or

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

NOTE:

Not class: 'clear', is should 'class': 'clear' or className: 'clear'. Because class is reserved keyword.