JavaScript returns [object Object]

Question

I'm trying to get this running

$('#info').replaceWith('<div id="infobox" class="reveal-modal">'+$('#info').contents()+'<a class="close-reveal-modal">&#215;</a></div>');

but It just gives me [object Object]. As I only replace it with $('#info').contents() things work fine.

Well, $('#info').contents() is an object and the default string representation of an object is [object Object]. You cannot just concatenate strings with arbitrary objects. — Felix Kling
– Felix Kling, Commented Aug 24, 2012 at 17:56

Shankar Cabus · Accepted Answer · 2012-08-24 18:02:39Z

4

Try:

$(function(){
    var content = $('#info').get(0).outerHTML;
    $('#info').replaceWith('<div id="infobox" class="reveal-modal">'+content+'<a class="close-reveal-modal">&#215;</a></div>');
})

The $('#info').get(0).outerHTML returns <div id="info">anything</div>. But if just want the content, use $('#info').html(), that returns anything.

edited Aug 24, 2012 at 18:02

answered Aug 24, 2012 at 17:55

Shankar Cabus

9,8228 gold badges37 silver badges43 bronze badges

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

Comments

hunter · Accepted Answer · 2012-08-24 18:11:36Z

2

If you're trying to maintain the existing content and place it inside an outer div try using wrap() and you can call after() to adding the closing anchor.

$('#info').wrap('<div id="infobox" class="reveal-modal">')
    .after('<a class="close-reveal-modal">&#215;</a>')

Working example: http://jsfiddle.net/hunter/qU4s3/

Could also be written like this:

$('#info')
    .wrap($('<div>', { id: "infobox", "class": "reveal-modal"}))
    .after($('<a>', { "class": "close-reveal-modal", html: "&#215;" }));

Working example: http://jsfiddle.net/hunter/qU4s3/2/

edited Aug 24, 2012 at 18:11

answered Aug 24, 2012 at 17:56

hunter

63.7k19 gold badges115 silver badges115 bronze badges

3 Comments

Fabrício Matté Over a year ago

One thing though, .append should be .after, and wrap should include it.

Fabrício Matté Over a year ago

Your updated version looks even better and makes sense to me, testing.

Fabrício Matté Over a year ago

+1 Best answer so far as it doesn't have to parse HTML unnecessarily.

Musa · Accepted Answer · 2012-08-24 17:56:40Z

1

.contents() returns a jQuery object, what you want is .text() or .html() depending on if #info contains other elements.

$('#info').replaceWith('<div id="infobox" class="reveal-modal">'+$('#info').text()+'<a class="close-reveal-modal">&#215;</a></div>');

answered Aug 24, 2012 at 17:56

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Comments

Ankush Jain · Accepted Answer · 2012-08-24 17:56:57Z

0

starts with $('#info').contents(). <-- like this

answered Aug 24, 2012 at 17:56

Ankush Jain

7,2434 gold badges41 silver badges71 bronze badges

1 Comment

Felix Kling Over a year ago

Please explain how this solves the problem? What is the trailing dot for? If you'd just insert it into the OP's code, you'd get a syntax error.

Collectives™ on Stack Overflow

JavaScript returns [object Object]

4 Answers 4

Comments

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related