使用append（）添加大块html（）

我试图使用jquery的append（）追加大块文本。使用append（）添加大块html（）

$('#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吗？

来源

2012-05-25 Thomas

您是否有ID为“accordian_container”的元素？ – nunespascal

控制台上是否存在特定的错误消息？ – David

删除换行符。

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-25 18:16:17

'$（'＃accordion_container'）。append（large）;'因为这是他如何发布的。（假设他有一个ID为'accordion_container'的元素） –

这会将它附加到所有div元素。不是你通常想要的东西。 – nunespascal

这是一个从我的小提琴示例中拉出的样本。这个问题附加到一个ID中，我认为提问的人会有足够的常识来将它追加到想要追加的地方。更新。 –

这是我的理解是，如果你希望把你的长字符串在多行，它是更有效地使用字符串数组，并加入他们的行列。

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

来源

2012-05-25 18:21:06 David

JavaScript没有在你编写它们的方式多行字符串，你不能只是打开一个字符串在同一行，往下走了几行，然后将其关闭。（在JS中有多种方式来处理多行字符串，但它们有些倒退）。

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

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

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

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

来源

2012-05-25 18:24:16

如果文本有单引号（'）ex'Mr.Ms '，grunt构建将失败，请使用下面的答案。它为我工作。 –

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

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

的jQuery：

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

在JavaScript字符串把HTML是难以阅读和搜索，很容易出错，您的IDE将难以正确格式化。

来源

2013-06-30 10:40:10 rybo111

我可以多次插入相同的模板吗？ –

@FranciscoCorralesMorales是的 - 前倾尽可能多的你喜欢 – rybo111

绝对是正确的做法，我已经添加了一个小例子的HTML模板来澄清你的答案 –

你也可以用jQuery克隆div，然后追加克隆方式 - 不那么杂乱。

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

来源

2014-10-03 17:23:24 alexoviedo999

如果换行符是一个问题，只是使用innerHTML，工作在每一个浏览器，因为IE5：

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

或者，收藏：

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

来源

2014-10-17 12:20:14

您可以使用反斜杠每一行的结尾。

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

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

来源

2015-02-25 11:18:43

我使用奥利弗所说的所有时间在JS中，因为它看起来更人性化。而且，您不必每行都定义行情并连接：这是我的http://jsfiddle.net/49gpqwua/（JSFiddle） – Preactive

另一种方法是模板文字与回蜱：

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-17 18:37:49 gustavwiz

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

感谢您指出这一点，@JimboJonny – gustavwiz

这是黄金，非常感谢。 –

使用append（）添加大块html（）

回答

相关问题