用 append() 附加大块 html

Posted 2023-03-11

【中文标题】用 append() 附加大块 html

【英文标题】：Appending large block of html with append()

【发布时间】：2012-06-01 07:58:00

【问题描述】：

我正在尝试使用 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 吗？

【问题讨论】：

你有id为“accordian_container”的元素吗？

控制台上是否有特定的错误信息？

【参考方案1】：

现代答案

随着 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>';

【讨论】：

如果文本有单引号(') ex ` Mr./Ms `，grunt build 将失败，请使用下面的答案。它对我有用。

@RameshPapaganti - 任何字符串都是如此，无论如何。如果您使用旨在关闭字符串中的字符串的字符（不转义它，可以使用反斜杠 'it\'s' 完成）......那么它会认为您正在关闭字符串。 JS 很不错，但不是心灵感应 :)

【参考方案2】：

您可以在 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，例如table 之外的 td 标签。

【讨论】：

我可以多次插入同一个模板吗？

绝对是正确的方法，我添加了一个小示例 html 模板来澄清您的答案

【参考方案3】：

删除换行符。

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

【讨论】：

$('#accordion_container').append(large); 因为这就是他发布的方式。 （前提是他有一个 ID 为 accordion_container 的元素）

这会将它附加到所有 div 元素。不是您通常想要的。

这是从我的小提琴示例中提取的样本。问题将其附加到 ID，我假设提出问题的人有足够的常识将其附加到他们想要附加的位置。更新中。

如果他有 2 个相同的 id，我相信它会完全失败

抱歉，这是无意的 - 我已经修复了双重 ID 问题。然而，换行符是我的脚本问题的路径。

【参考方案4】：

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

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

【参考方案5】：

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

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

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

【讨论】：

我在 JS 中一直使用 Oliver 所说的内容，因为它看起来更易于阅读。而且您不必继续定义 Quotes 每一行并连接：这是我的 jsfiddle.net/49gpqwua (JSFiddle)

【参考方案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

【讨论】：

请注意，名称已更改为 模板文字，并且在该示例中，用于缩进后两行的空格将是结束字符串的一部分。仍然是一个有效的答案，只是值得注意这两件事。

这很可靠...谢谢。

【参考方案7】：

Javascript 可以选择将多行/HTML 部分扩展为单行，为 HTML 行的每一行添加 backslash() 以标识其继续行。

注意：- 附加行时唯一需要考虑的是单引号和双引号。如果您以单引号开头，则在内部字符串中使用双引号，反之亦然，否则，换行符并不能得到正确的结果。

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

Appending multiple html elements using Jquery

spread html in multiple lines javascript

【参考方案8】：

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

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

使用“\”转义。

使用“`”（反引号，grave accent），不需要任何额外的操作。 从 ES2015/ES6 开始支持此方法 (Template literals)。

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

现在将一些使用场景发布到上面提到的first three methods（只需在Chrome浏览器的控制台中运行它们即可。）：

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

【参考方案9】：

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

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' %" >
                                <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

【讨论】：

赞成这个答案的反引号技巧。其他答案与模板文字有关，但在阅读您的答案后我注意到反引号之前我无法使用它们。

【参考方案10】：

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

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

【参考方案11】：

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

【参考方案12】：

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

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

或者，对于集合：

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