如何在Javascript中添加HTML元素？

Question

我想追加兩個HTML元素，並把它傳遞給after()功能的jQuery：

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