Ajouter un gros bloc de html avec append ()

Im essayant d'ajouter un gros bloc de texte à l'aide de 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);



});

Il ne semble pas être au travail et après avoir regardé la documentation pour append(), je ne peux pas comprendre pourquoi - des idées? C'est la grande quantité de HTML que je suis en train d'ajouter?

source d'informationauteur Thomas

  1. 19

    Supprimer les sauts de ligne.

    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);​
  2. 22

    Javascript n'a pas de multi-chaînes dans la façon dont vous écrivez, vous ne pouvez pas ouvrir une chaîne de caractères sur une seule ligne, allez en bas de quelques lignes et puis fermez-le. (il y a quelques manières de faire de la multi-ligne de chaînes en JS, mais ils sont en quelque sorte à l'envers).

    Comment la plupart des gens faire est quelque chose comme ceci:

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

    Note que la réponse ci-dessus est vieux et n'est plus entièrement vrai. Comme ES6 devient de plus en plus commun, et que de plus en plus de gens transpile de ES6, nous sommes de plus en plus en mesure d'utiliser un modèle littéraux, qui peut être utilisé en tant que multi-chaînes:

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

    Vous devez créer un modèle en HTML qui est masqué, puis ajouter son contenu HTML. Par exemple:

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

    jQuery:

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

    Mettre du HTML dans un JavaScript chaîne est plus difficile à lire et de la recherche, est sujette aux erreurs et votre IDE aura du mal à le formater correctement.

  4. 8

    C'est ma compréhension que si vous voulez mettre votre longue chaîne de caractères sur plusieurs lignes, il est plus efficace d'utiliser un tableau de chaînes de caractères et de se joindre à eux.

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

    Vous pouvez utiliser une barre oblique à la fin de chaque ligne.

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

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

    Une autre alternative est Modèle de littéraux avec arrière-tiques:

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

    C'est un assez nouvelle syntaxe et pas pris en charge dans IE.

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

  7. 0

    Vous pouvez aussi dupliquer le div avec jQuery et puis ajouter le clone--manière moins salissant.

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

    Si des sauts de lignes sont un problème il suffit d'utiliser innerHTML, fonctionne dans tous les navigateurs depuis IE5:

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

    Ou, pour les collections:

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