web-dev-qa-db-fra.com

Ajouter un grand bloc de HTML avec append ()

J'essaie d'ajouter un gros bloc de texte en utilisant 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);



});

Cela ne semble pas fonctionner et après avoir consulté la documentation de append (), je ne comprends pas pourquoi - des idées? Est-ce la grande quantité de HTML que j'essaie d'ajouter?

javascriptjqueryhtmlappend
18
Thomas

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);​
22
Kevin B

Javascript ne comporte pas de chaînes multilignes dans la façon dont vous les écrivez. Vous ne pouvez pas simplement ouvrir une chaîne sur une ligne, descendre quelques lignes puis la fermer. (Il y a quelques façons de faire des chaînes multi-lignes dans JS, mais elles sont un peu en arrière).

Comment la plupart des gens font-ils quelque chose comme ça:

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

Remarque que la réponse ci-dessus est ancienne et n'est plus totalement vraie. Au fur et à mesure que l'ES6 devient plus courant et que de plus en plus de personnes transpirent d'ES6, nous sommes de plus en plus capables d'utiliser des littéraux de modèle, qui peuvent être utilisés en tant que chaînes multilignes:

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

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

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

jQuery:

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

Insérer du code HTML dans une chaîne JavaScript est plus difficile à lire et à rechercher, il est sujet aux erreurs et votre IDE aura du mal à le formater correctement.

26
rybo111

Je crois comprendre que si vous voulez placer votre longue chaîne sur plusieurs lignes, il est plus efficace d’utiliser un tableau de chaînes et de les joindre.

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

Vous pouvez utiliser une barre oblique inverse à 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...";
7
Oliver Konig

Une autre alternative est Littéral de modèle avec ticks arrière:

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

C'est une syntaxe relativement nouvelle et non prise en charge dans IE.

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

6
gustavwiz

Vous pouvez également cloner la div avec jQuery, puis ajouter le clone - beaucoup moins de désordre.

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

il suffit d’ajouter comme ceci $ (# element) .append (large_html), large_html en caractère spécial (``) et me remercier plus tard. 

0
Chidananda Nayak

Par défaut, le code HTML contenant des wraps ne peut pas être utilisé avec append/prependdirectement, utilisez 'or". Cependant, il existe actuellement des méthodes pour le faire:

  1. Utilisez "+" pour joindre des morceaux de code HTML.

  2. Utilisez "\" pour vous échapper.

  3. Utilisez "` "(tick arrière, Accent grave ), aucune opération supplémentaire n'est nécessaire . Cette méthode est prise en charge à partir de ES2015/ES6 ( Littéraux de modèle ).

  4. Ajoutez une tag cachée contenant le même code HTML que vous avez besoin, par exemple. <p id="foo" style="display:none;">, puis utilisez.append($('#foo').html());.

    Publiez maintenant quelques scénarios d’utilisation sur le first three methods mentionné ci-dessus (exécutez-les simplement dans la console du navigateur Chrome.):  enter image description here

Nous pouvons voir leurs différences clairement.

0
Bravo Yeung

Si les sauts de ligne posent un problème, utilisez innerHTML et fonctionne dans tous les navigateurs depuis IE5:

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

Ou, pour les collections:

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

Javascript permet d’étendre plusieurs lignes/sections HTML en une seule ligne. Pour chaque ligne de la ligne HTML, ajoutez backslash () pour identifier sa ligne continue.

Note: -La seule chose à considérer lors de l'ajout de lignes est la citation simple et la citation double. Si vous commencez par la citation simple, utilisez la citation double dans la chaîne interne ou inversement, sinon la ligne est interrompue et n'obtient pas le résultat correct.

$(element).append('<div class="content"><div class="left"></div><div class="right"></div></div>');

Syntaxe Javascript

 var str = ' <div class="content"> \
<div class="left"> \
</div> \
<div class="right"> \
</div> \
</div> ';

 document.getElementsByName(str).html(str);
 //or
 document.getElementsById(str).html(str);

Syntaxe JQuery 

 $(element).append(' \
  <div class="content"> \
    <div class="left"> \
    </div> \
    <div class="right"> \
    </div> \
  </div> \
');

Ou Vous pouvez utiliser un modèle html pour cela, comme mention dans le 3ème lien via jquery 

$("#div").load("/html_template.html");

http://www.no-margin-for-errors.com/blog/2010/06/17/javascript-tip-of-the-day-extending-a-string-across-multiple-lines/

Ajout de plusieurs éléments HTML à l'aide de JQuery

diffuser du HTML en plusieurs lignes javascript

0
Ajay2707