How do I convert an array of [object, object]'s to html()?

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?

thecodeparadox · Accepted Answer · 2012-05-08 15:59:08Z

3

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.

edited May 8, 2012 at 15:59

answered May 8, 2012 at 15:39

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thulasiram · Accepted Answer · 2012-05-08 15:45:17Z

1

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

//Or

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

answered May 8, 2012 at 15:45

Thulasiram

8,5628 gold badges48 silver badges54 bronze badges

Comments

adeneo · Accepted Answer · 2012-05-08 15:49:09Z

0

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

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

FIDDLE

or

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

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

answered May 8, 2012 at 15:49

adeneo

319k29 gold badges410 silver badges392 bronze badges

Comments

Roko C. Buljan · Accepted Answer · 2012-05-08 15:50:50Z

0

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

answered May 8, 2012 at 15:50

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Collectives™ on Stack Overflow

How do I convert an array of [object, object]'s to html()?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related