使用Jquery添加多个html元素

Question

我是jQuery的新手，想知道是否有人能就最佳实践给予我建议...

我想把一个包含大量HTML的div元素附加到页面上，但不确定实现这个目标的最佳方式是什么......或者是否适合使用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>

- namtax

Answer 1

如果您想添加原始HTML内容，只需使用jQuery的append函数。例如：

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

根据您的需要将选择器从 body 改为其他 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>');

- Technowise

---

这是比将内容放入连接数组更好的方法吗？ - namtax

不确定您的意思。您是指用于每个换行符的斜杠吗？ - Technowise

我是指将此作为替代方案...var array1 = ['<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>']; $(array1.join('')) .appendTo('#test'); - namtax

我不知道为什么你会把它们放进数组里。无论如何，这种方法并不比你的方法“更好”。这只是一种偏好，我更喜欢我上面写的方法。 - Technowise

为什么我们需要在行末加上\？是否有自动完成此操作的方法？ - studioromeo

@studioromeo 这是一个多行字符串字面量。你可以在这里阅读更多信息（http://davidwalsh.name/multiline-javascript-strings）。 - FreeAsInBeer

Answer 2

$("#id_of_div").append($("#id_of_div_that_you_wanna_append").html());

- Tommaso Taruffi

---

最好使用已经在HTML中的div，还是使用Jquery动态创建HTML以供您使用...例如 $('

- namtax

你不需要在结尾处添加 .html()。 - antti_s

如果你打算复制多份，那么最后需要使用.html()。 - Magnar

Answer 3

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

- MattC

Answer 4

目前有以下几种方法：

1. 使用“+”连接HTML代码片段。

2. 使用“\”进行转义。

3. 使用“`”（反引号，重音符号），不需要任何额外的操作。这种方法从ES2015/ES6（模板文字）开始支持。

4. 添加一个包含相同HTML代码的隐藏tag，例如<p id="foo" style="display:none;">，然后使用.append($('#foo').html());。

   现在将一些使用场景发布到上述提到的前三种方法中（只需在Chrome浏览器的控制台中运行它们）：

我们可以清楚地看到它们之间的区别。

- Bravo Yeung

Answer 5

使用ES6（ECMAScript 2015）现在可以使用反引号来包围所有HTML，即使其中包含单引号或双引号也可以（还可以在它们之间添加变量），这非常有用。

但是，由于问题似乎专注于在一些现有元素之后添加整个块，所以在这种情况下，可能after方法比append更合适。这是它们之间的区别（运行代码段）：

let $num = 0;
$('main').append(`
  <article>
    <h2>Appended ${++$num}</h2>
    <p>Using 'single' and "double-quotes" without escaping!</p>
  </article>
  
  <article>
    <h2>Appended ${++$num}</h2>
    <p>Using 'single' and "double-quotes" without escaping!</p>
  </article>
`).after(`
  <footer>
    <h2>Added after main</h2>
    <p><b>${++$num} blocks</b> of multiple elements were added through jQuery</p>
  </footer>
`);

article {background: #eee;border:1px solid #000;padding:1rem}
main {background: #ccc;padding:1rem}
body {background: #aaa;padding:1rem}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
  <h1>Main section</h1>
  <article>
    <h2>jQuery</h2>
    <p>Adding multiple elements...</p>
  </article>
</main>

注意

如果您更喜欢使用等效的insertAfter和appendTo，则可以使用以下替代语法：$('<p>my html</p>').insertAfter('main')

包含要添加的HTML块的jQuery对象首先出现，您只需要在方法的参数中引用该字符串即可。

- CPHPython