2012-05-25 14 views
14

Próbuję dołączyć duży blok tekstu za pomocą append jquery's().Dołączanie dużego bloku html z 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); 



}); 

Wygląda na to, że nie działa i po zapoznaniu się z dokumentacją dla append(), nie mogę zrozumieć, dlaczego - jakieś pomysły? Czy jest to duża ilość kodu HTML, który próbuję dołączyć?

+1

Czy masz element o identyfikatorze "accordian_container"? – nunespascal

+0

Czy na konsoli jest określony komunikat o błędzie? – David

Odpowiedz

19

Usunięcie podziałów linii.

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

'$ ('# accordion_container') .endend (duży);' tak to właśnie opublikował. (Pod warunkiem, że ma element o identyfikatorze 'accordion_container') –

+0

To mogłoby dołączyć do wszystkich elementów div. Nie jest to coś, czego zwykle byś chciał. – nunespascal

+1

To była próbka wyjęta z mojego przykładu na skrzypcach. Pytanie to dołącza do identyfikatora, założyłem, że osoba pytająca będzie miała dość zdrowego rozsądku, aby dołączyć ją tam, gdzie chce ją dołączyć. Aktualizacja. –

8

To moja zrozumienie, że jeśli chcesz umieścić swój długi ciąg na wielu liniach, że jest to bardziej efektywne w użyciu tablicę ciągów i połączyć je.

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

Javascript nie posiada multilinii ciągi w sposób, w jaki są ich pisania, nie można po prostu otworzyć ciąg na jednej linii, zejść kilka wierszy, a następnie zamknij ją. (są pewne sposoby wykonywania wieloliniowych ciągów w JS, ale są one w pewnym sensie odwrotne).

Jak większość ludzi to jest coś takiego:

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

Uwaga, że powyższa odpowiedź jest stary i nie jest już w pełni prawdziwe. Jak ES6 staje się coraz bardziej powszechne, a coraz więcej osób transpile z ES6, jesteśmy coraz bardziej w stanie wykorzystać literały szablonów, które mogą być używane jako multilinii strun:

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

Jeśli tekst ma pojedynczy cudzysłów (') ex 'Mr./Ms ', gruntowa kompilacja się nie powiedzie, Proszę użyć poniższej odpowiedzi. To zadziałało dla mnie. –

12

należy utworzyć szablon HTML, który jest ukryty, a następnie dołącz jego treść HTML. Na przykład:

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

jQuery:

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

Umieszczenie HTML w ciąg JavaScript jest trudniejsze do odczytania i szukać, jest podatny na błędy i IDE będą walczyć, aby go sformatować poprawnie.

+0

Czy mogę wstawić ten sam szablon kilka razy? –

+0

@FranciscoCorralesMorales tak - przygotowuje tyle, ile chcesz – rybo111

+0

zdecydowanie poprawne podejście, dodałem mały przykładowy szablon html, aby wyjaśnić Twoją odpowiedź. –

0

Możesz również klonować element div za pomocą jQuery, a następnie dodawać klony - mniej kłopotliwe.

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

Jeśli łamanie wierszy są problemem wystarczy użyć innerHTML, działa w każdej przeglądarce ponieważ IE5:

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

Albo na zbiorach:

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

Można użyć ukośnika na koniec każdej linii.

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

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

Używam tego, co Oliver powiedział przez cały czas w JS, ponieważ wygląda na bardziej czytelny dla człowieka. I nie musisz dalej definiować Cytatów w każdym wierszu i konkatenować: Oto mój http://jsfiddle.net/49gpqwua/ (JSFiddle) – Preactive

3

Inną alternatywą jest Szablon literały z back-kleszcze:

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

Jest to dość nowa składnia i nie są obsługiwane w IE choć.

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

+0

Zauważ, że nazwa została zmieniona na ** literały szablonu **, i że w w tym przykładzie spacje do wcięcia dwóch pierwszych linii byłyby częścią ciągu końcowego. Nadal jest to poprawna odpowiedź, po prostu warto zwrócić uwagę na te dwie rzeczy. –

+0

Dzięki za wskazanie tego, @JimboJonny – gustavwiz

+0

To jest złoty, wielkie dzięki. –

Powiązane problemy