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() documentation，您有很多方法可以做到这一点。

$('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);

如何在Javascript中追加HTML元素？

4 个答案: