附加的HTML大块与追加（）(Appending large block of html with

我试着使用jQuery的追加到文本的大块追加（）。

$('#add_contact_btn').click(function(event) {
    event.preventDefault();

    var large = '<div class="accordian_container"><a href="#" class="accordian_trigger"><h4>Co-Borrower Information</h4></a><hr/><div class="accordian_item" id="accord_item_2"><label> First Name</label><br/><input type="text"/><br/><label>Middle Name</label><br/>
            <input type="text"/><br/>
            <label>Last Name</label><br/>
            <input type="text" /><br/>
            <label>Home Number</label><br/>
            <input type="text"/><br>
            <label>Work Number</label><br/>
            <input type="text"/><br>
            <label>Cell Number</label><br/>
            <input type="text"/><br>
            </div>
            </div>';

    $('#accordion_container').append(large);



});

它似乎并不奏效，并在寻找可以进行追加（）的文件后，我想不通为什么 - 任何想法？ 难道我想追加大量HTML的？

Answer 1:

删除换行符。

http://jsfiddle.net/DmERt/

var large = '<div class="accordian_container"><a href="#" class="accordian_trigger"><h4>Co-Borrower Information</h4></a><hr/><div class="accordian_item" id="accord_item_2"><label> First Name</label><br/><input type="text"/><br/><label>Middle Name</label><br/><input type="text"/><br/><label>Last Name</label><br/><input type="text" /><br/><label>Home Number</label><br/><input type="text"/><br><label>Work Number</label><br/><input type="text"/><br><label>Cell Number</label><br/><input type="text"/><br></div></div>';

$('#accordion_container').append(large);​

Answer 2:

JavaScript没有在你编写它们的方式多行字符串，你不能只是打开一个字符串在同一行，往下走了几行，然后将其关闭。 （也有在做JS多行字符串的一些方法，但他们那种向后）。

如何大多数人做到这一点是这样的：

var myString = '<p>Line One</p>' +
'<p>Line Two</p>' +
'<p>Line Three</p>';

---

需要注意的是上面的回答是旧的，不再是完全正确的。 作为ES6，随着越来越多的人从ES6 transpile变得越来越普遍，我们越来越多的能够使用模板文字，它可以作为多行字符串：

var myString = `<p>Line One</p>
<p>Line Two</p>
<p>Line Three</p>`;

Answer 3:

您应该创建在隐藏的HTML模板，然后追加其内容的HTML。 例如：

<div class="hide" id="template">
  <b>Some HTML</b>
</div>

jQuery的：

$("#container").append($("#template").html());

在JavaScript字符串把HTML是难以阅读和搜索，很容易出错，您的IDE将难以正确格式化。

---

更新2019

退房的template标签，这是为此目的而创建： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

该template标签甚至允许包含什么是无效的HTML的其他地方，例如td一外标签table 。

Answer 4:

这是我的理解是，如果你希望把你的长字符串在多行，它是更有效地使用字符串数组，并加入他们的行列。

var bigString = [
    'some long text here',
    'more long text here',
    '...'
];
$('#accordion_container').append(bigString.join(''));

Answer 5:

你可以在每行的末尾使用反斜杠。

http://davidwalsh.name/multiline-javascript-strings

var multiStr = "This is the first line \
This is the second line \
This is more...";

Answer 6:

另一种方法是模板文字与反单引号 ：

var large = `some long text here
some long text here
some long text here`;

这是一个相当新的语法和IE不支持，但。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Answer 7:

的Javascript不得不延长多行/ HTML部分成单行中，HTML行的每一行添加反斜杠选项（），以确定它的继续线。

注 ：-The唯一要考虑的，而附加线是单引号和双引号。 如果你开始用单引号，然后用双引号内的字符串或反之亦然中，否则，线断，并没有得到正确的结果。

$(element).append('<div class="content"><div class="left"></div><div class="right"></div></div>');

JavaScript语法

 var str = ' <div class="content"> \
<div class="left"> \
</div> \
<div class="right"> \
</div> \
</div> ';

 document.getElementsByName(str).html(str);
 //or
 document.getElementsById(str).html(str);

jQuery的语法

 $(element).append(' \
  <div class="content"> \
    <div class="left"> \
    </div> \
    <div class="right"> \
    </div> \
  </div> \
');

或者你也可以在通过jQuery第三链接使用的HTML模板，这是提

$("#div").load("/html_template.html");

http://www.no-margin-for-errors.com/blog/2010/06/17/javascript-tip-of-the-day-extending-a-string-across-multiple-lines/

附加使用JQuery多个HTML元素

传播HTML多行的javascript

Answer 8:

您也可以克隆使用jQuery在div然后追加克隆 - 路少凌乱。

var accordionClone = $('.accordion_container').clone();
$('#accordion_container').append(accordionClone);

Answer 9:

如果换行符是一个问题，只是使用innerHTML，工作在IE5以来每一个浏览器：

$('#accordion_container')[0].innerHTML += large;​

或者，对于集合：

$('.accordion_container').forEach(function () {
    this.innerHTML += large;​
});

Answer 10:

只需添加这样的$（＃元素）.append（ large_html ），large_html在特殊字符（``）和感谢我以后。

Answer 11:

默认情况下，包含包裹的HTML代码不能与使用append/prepend直接使用'or"然而，目前有以下方法来做到这一点：

1. 使用“+”加入HTML代码段。

2. 使用“\”来逃避。

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

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

   现在发布一些使用场景的first three methods上述文件档案化（只是在控制台上运行他们Chrome浏览器。）：

我们可以清楚地看到他们之间的分歧。

文章来源: Appending large block of html with append()