使用Jquery追加多个html元素

Question

我是jQuery的新手,想知道是否可以告诉我最佳实践......

我希望在页面中附加一个div元素,其中包含大量的html,并且不确定实现此目的的最佳方法是什么......或者如果使用jquery是可取的...

例如,如果我想使用jquery将以下代码附加到页面,那么最好的方法是什么.

<div id="test">
    <h1>This is the test</h1>
    <p>Hello, just a test</p>
    <a href="www.test.com">Click me</a>
    <a href="www.test.com">Click me again</a>
</div>

Answer 1

如果要按原样添加HTML,则只需使用jQuery追加功能.例如:

$('body').append('
<div id="test">\
    <h1>This is the test</h1>\
       <p>Hello, just a test</p>\
       <a href="www.test.com">Click me</a>\
       <a href="www.test.com">Click me again</a>\
</div>');

根据您的要求将选择器从主体更改为其他DOM元素/选择器.

或者,如果您已在文档中使用ID为"test"的div元素,则可以使用html()函数设置内容,如下所示:

$("#test").html('<h1>This is the test</h1>\
       <p>Hello, just a test</p>\
       <a href="www.test.com">Click me</a>\
       <a href="www.test.com">Click me again</a>');

Answer 2

$("#test").append("YOUR CONTENT GOES HERE");