使用append（）附加大块html

Question

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

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



});

它似乎没有工作，在查看append（）的文档后，我无法弄清楚为什么 - 任何想法？我试图追加大量的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

只需添加像$（＃element）.append（large_html），large_html的特殊字符（``），谢谢我。

Answer 3

默认情况下，包含换行的HTML代码不能与append/prependdirectly一起使用'or"。但是目前有以下方法可以做到这一点：

1. 使用“+”加入HTML代码段。
2. 使用“\”来逃避。
3. 使用“`”（back-tick，grave accent），不需要任何额外的操作。 ES2015 / ES6（Template literals）支持此方法。
4. 添加一个隐藏的tag，其中包含您需要的相同HTML代码，例如<p id="foo" style="display:none;">，然后使用.append($('#foo').html());。 现在将一些使用场景发布到上面提到的first three methods（只需在Chrome浏览器的控制台中运行它们）。：

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

Answer 4

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

大多数人这样做是这样的：

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

---

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

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

Answer 5

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

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

jQuery的：

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

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

---

Update 2019

查看为此目的创建的template标记：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

甚至允许template标签包含其他地方无效的HTML，例如在td外面的table标签。

Answer 6

我的理解是，如果你想将长字符串放在多行上，那么使用字符串数组并加入它们会更有效。

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

Answer 7

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

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

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

Answer 8

另一种选择是具有反向标记的模板文字：

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 9

Javascript可以选择将多行/ HTML部分扩展为一行，对于每行HTML行添加反斜杠（）以标识其继续行。

注意： - 追加行时唯一要考虑的是单引号和双引号。如果你从单引号开始，那么在内部字符串中使用双引号，反之亦然，否则，行是中断并且没有得到正确的结果。

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

或者您可以使用html模板，如第3个链接中提到的jquery

$("#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/

Appending multiple html elements using Jquery

spread html in multiple lines javascript

Answer 10

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

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

Answer 11

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

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

或者，对于集合：

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