Agregar un bloque grande de html con append()

Question

Im tratando de agregar un bloque grande de texto usando append() de jquery.

$('#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); 



}); 

No parece estar trabajando y después de ver la documentación de append(), no puedo entender por qué - cualquier idea? ¿Es la gran cantidad de HTML que estoy tratando de agregar?

Answer 1

Elimina los saltos de línea.

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

Es mi entendimiento de que si usted quiere poner su cadena larga en varias líneas que es más eficaz utilizar una matriz de cadenas y unirse a ellos.

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

Answer 3

Javascript no tiene líneas múltiples en la forma que está escribiendo, no se puede simplemente abrir una cadena en una línea, bajar unas cuantas líneas y luego cerrarla. (Hay algunas formas de hacer cadenas de varias líneas en JS, pero son un poco al revés).

Como la mayoría de la gente lo hace es algo como esto:

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

---

Nota que la respuesta anterior es viejo y ya no es totalmente cierto. Como ES6 se vuelve más común, ya medida que más y más personas transpile de ES6, somos más y más capaces de utilizar literales de plantilla, que pueden ser utilizados como líneas múltiples:

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

Answer 4

debe crear una plantilla en HTML que está oculto, luego agrega su contenido HTML. Por ejemplo:

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

jQuery:

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

Poner HTML en una cadena JavaScript es más difícil de leer y buscar, es propenso a errores y su IDE tendrá que luchar para formatear correctamente.

Answer 5

También puede clonar el div con jQuery y luego agregar el clon, de manera menos desordenada.

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

Answer 6

Si saltos de línea son un problema sólo tiene que utilizar innerHTML, que funciona en todos los navegadores, ya IE5:

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

O, para las colecciones:

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

Answer 7

Se puede utilizar una barra invertida al el final de cada línea

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

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

Answer 8

Otra alternativa es literales plantilla con back-garrapatas:

var large = `some long text here 
some long text here 
some long text here`; 

Es bastante una nueva sintaxis y no soportado en el IE sin embargo.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals