使用append（）追加大块html

我试图使用jquery的append（）附加一大块文本。

$('#add_contact_btn').click(function(event) { event.preventDefault(); var large = '
Co-Borrower Information
 First Name

Middle Name
 
 Last Name
 
 Home Number
 
 Work Number
 
 Cell Number
 
 
 
'; $('#accordion_container').append(large); }); 

它似乎没有工作，在查看append（）的文档后，我无法弄清楚为什么 – 任何想法？ 我试图追加大量的HTML吗？

Answer 1

删除换行符。

http://jsfiddle.net/DmERt/

 var large = '
Co-Borrower Information
 First Name

Middle Name

Last Name

Home Number

Work Number

Cell Number

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

Answer 2

Javascript在编写它们的方式上没有多行字符串，你不能只在一行上打开一个字符串，向下走几行然后关闭它。 （在JS中有一些做多行字符串的方法，但它们有点倒退）。

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

 var myString = '
Line One
' + '
Line Two
' + '
Line Three
'; 

---

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

 var myString = `
Line One
 
Line Two
 
Line Three
`; 

Answer 3

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

 
 Some HTML  

jQuery的：

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

将HTML放在JavaScript字符串中更难以阅读和搜索，容易出错，并且IDE很难正确地格式化它。

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

您还可以使用jQuery克隆div，然后附加克隆 – 方式不那么混乱。

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

Answer 8

如果换行是一个问题，只需使用innerHTML，自IE5起在每个浏览器中都有效：

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

或者，对于集合：

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