使用 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 吗？

原文由 Thomas 发布，翻译遵循 CC BY-SA 4.0 许可协议

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);​

原文由 Kevin B 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

现代答案

随着 ES6（及更高版本）变得越来越普遍，并且越来越多的人从 ES6 进行转换，我们越来越能够使用模板文字，它可以用作多行字符串：

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

---

2012 年原始答案 (ES5)

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

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

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

原文由 Jimbo Jonny 发布，翻译遵循 CC BY-SA 4.0 许可协议