如何在Javascript中附加HTML元素？

Question

我試圖追加兩個HTML元素並將其傳遞給jquery中的after()函數：

$('div.masterButtons').after(function () {
    var foobar = $('<div>foo<div>bar</div></div>');
    var foobaz = $('<div>foo<div>baz</div></div>');
    return (foobar + foobaz)
    }
);

它打印：

[object Object][object Object]

如何附加這兩個元素？ 我避免連接兩個html字符串，因為div比這些字符串復雜得多，並且我需要jquery元素來構建它。

Answer 1

foobar和foobaz都是jQuery對象，您不能使用+來添加它們

 $('div.masterButtons').after(function () { var foobar = $('<div>foo<div>bar</div></div>'); var foobaz = $('<div>foo<div>baz</div></div>'); return foobar.add(foobaz) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="masterButtons"></div> 

Answer 2

如果您真的想在那里使用該功能，請使用https://stackoverflow.com/users/114251/arun-p-johny提供的答案。 另外，您可以簡化為：

$('div.masterButtons')
    .after('<div>foo<div>bar</div></div>')
    .after('<div>foo<div>baz</div></div>');

Answer 3

您也可以使用.insertAfter

$('div.masterButtons').insertAfter('<div>foo<div>bar</div></div>')

Answer 4

基於jQuery .after（）文檔，您可以通過多種方式來實現。

$('div.masterButtons')
.after('<div>foo<div>bar</div></div>','<div>foo<div>baz</div></div>');

要么

$('div.masterButtons')
.after('<div>foo<div>bar</div></div>')
.after('<div>foo<div>baz</div></div>');

要么

var barAndBaz = ['<div>foo<div>bar</div></div>','<div>foo<div>baz</div></div>'];
$('div.masterButtons').after(barAndBaz);