JavaScript返回[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.

Answer 1

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 .

Answer 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/

Answer 3

.contents()返回一个jQuery对象，你想要的是.text()或.html()这取决于#info包含其他元素。

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

Answer 4

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