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

這是我的理解是，如果你希望把你的長字符串在多行，它是更有效地使用字符串數組，並加入他們的行列。

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

Answer 3

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>`; 

Answer 4

你應該在HTML創建一個模板被隱藏，然後附加其內容HTML。例如：

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

的jQuery：

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

在JavaScript字符串把HTML是難以閱讀和搜索，很容易出錯，您的IDE將難以正確格式化。

Answer 5

你也可以用jQuery克隆div，然後追加克隆方式 - 不那麼雜亂。

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

Answer 6

如果換行符是一個問題，只是使用innerHTML，工作在每一個瀏覽器，因爲IE5：

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

或者，收藏：

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

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