29

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

4

12 回答 12

40

现代答案

随着 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>';
于 2012-05-25T18:24:16.430 回答
37

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

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

jQuery：

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

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

2019 年更新

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

该template标签甚至可以包含在其他地方无效的 HTML，td例如table.

于 2013-06-30T10:40:10.123 回答
27

删除换行符。

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);​
于 2012-05-25T18:16:17.430 回答
8

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

var bigString = [
    'some long text here',
    'more long text here',
    '...'
];
$('#accordion_container').append(bigString.join(''));
于 2012-05-25T18:21:06.990 回答
8

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

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

var multiStr = "This is the first line \
This is the second line \
This is more...";
于 2015-02-25T11:18:43.857 回答
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

于 2015-11-17T18:37:49.167 回答
2

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 模板，如通过 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/

使用 Jquery 附加多个 html 元素

在多行中传播 html javascript

于 2018-11-19T06:36:36.753 回答
2

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

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

  2. 使用“\”转义。

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

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

    现在将一些使用场景发布到first three methods上面提到的（只需在Chrome浏览器控制台中运行它们。）： 在此处输入图像描述

我们可以清楚地看到它们的差异。

于 2019-02-24T07:11:50.103 回答
2

使用模板文字 模板文字是用反引号 (`) 分隔的文字，允许嵌入的表达式称为替换

var test = `<div class="question-content"> <p>  ${mydata.commented.comment}</p></div> <div class="about-info">
                    <div class="count-section">
                    <button id="clike-button" value={{comment.id}}><i class="fas fa-arrow-up"></i></button>

                    <h3 id="clike_count">{{ question.clike_count }}</h3>
                    <button id="cdislike-button" value={{comment.id}}><i class="fas fa-arrow-down"></i></button>

                </div>
                            <div class="user-profile">
                                <img src="{% static 'img/profile-pic.png' %}" alt="">
                                <div class="user-info">
                                    <p> ${mydata.user}</p>
                                    <p class="user-badge">
                                    <p class="user-badge"> <span style="padding-left: 2px;">13.1k</span><i
                                            class="fas fa-circle gold"></i> <span> 2</span> <i class="fas fa-circle silver"></i>
                                        <span>
                                            7</span> <i class="fas fa-circle bronze"></i> <span>56</span>
                                    </p>
                                </div>
                            </div></div> `;
                $("#commentlist").append(test)

https://i.stack.imgur.com/5BZHB.png

于 2021-08-21T10:32:48.663 回答
1

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

var accordionClone = $('.accordion_container').clone();
$('#accordion_container').append(accordionClone);
于 2014-10-03T17:23:24.667 回答
1

只需在特殊字符（``）中添加这样的 $(#element).append( large_html),large_html 并稍后感谢我。

于 2018-11-21T12:32:58.117 回答
0

如果换行是一个问题，只需使用 innerHTML，它适用于自 IE5 以来的所有浏览器：

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

或者，对于集合：

$('.accordion_container').forEach(function () {
    this.innerHTML += large;​
});
于 2014-10-17T12:20:14.607 回答