Comment stocker un extrait de code HTML et l'insérer plus tard dans le document?

Question

Existe-t-il un moyen de stocker un extrait HTML dans une variable en utilisant Javascript ou jQuery comme ceci? (Évidemment il est un exemple de non-travail)

var mysnippet = << EOF 
<div class="myclass"> 
    <div class="anotherclass"> 
    Some dummy text 
    </div> 
</div> 
EOF 

Et puis l'insérer dans le document en utilisant jQuery:

mysnippet.append($('#someelement')); 

EDIT:

S'il vous plaît, lisez ceci avant de répondre à des commentant: Ce que j'ai un extrait HTML brut dans mon fichier JS, et j'ai besoin de le stocker dans une variable Javascript en utilisant quelque chose comme à la construction de l'EOF. Je dois éviter de le mettre entre guillemets.

Si ce n'est pas possible avec Javascript et/ou jQuery, alors la question n'a pas de solution.

Answer 1

Vous pouvez utiliser javascript modèles comme ejs, haml-coffee ...

Answer 2

Il suffit d'obtenir le code HTML de la div que vous voulez par var content = $('#somediv').html();, puis l'ajouter à certains div plus tard! $('#otherdiv').append(content);

$().html(); fournit le contenu HTML de cette div. documentation: http://api.jquery.com/html/

$().append(<content>); ajoute le contenu à un div spécial. documentatoin: http://api.jquery.com/append/

Answer 3

Oui. Fiddle example

JavaScript

var html = '<b>Bold</b>' 
$('.anotherclass').append(html); 

HTML

<div class="myclass"> 
    <div class="anotherclass"> 
    Some dummy text 
    </div> 
</div> 

Answer 4

Vous pouvez écrire:

var mysnippet = "<div class='myclass'>"+ 
    "<div class='anotherclass'>"+ 
    "Some dummy text"+ 
    "</div>"+ 
"</div>"; 

puis insérer utilise la fonction append (qui prend l'extrait comme argument).

Answer 5

Malheureusement rien de tel que << EOF n'est disponible. Voici une solution:

$el = $('<div />') 
    .addClass('myClass') 
    .append(
    $('<div />') 
     .addClass('anotherclass') 
     .text('Foo Bar') 
); 

Answer 6

En pensant sur le même problème, j'ai trouvé cette discussion. Ce que j'ai à l'esprit est de mettre un textarea caché, contenant le code HTML, puis de récupérer le code HTML à partir de là.

Ainsi, il n'y aura pas de conflits avec les ID DOM doublés, puisque le contenu textarea n'est pas rendu en html.

Answer 7

Pour ceux qui viennent à travers ce que je ... vous pouvez utiliser la nouvelle balise <template> en HTML5. Il ne stocke pas encore le code HTML dans le JavaScript malheureusement :(