bloc HTML stocké comme var javascript

Je suis en train de stocker un bloc de HTML en javascript variables comme celui-ci,bloc HTML stocké comme var javascript

var element = <div class="MMinfoboxRoot"> 
    <div class="MMinfoboxaddress"> 
    <div> 
     <span class="MMrecordName">leicester 
     </span> 
     <br> 
     <span class="MMdaySpan MMdaySpanTitle">Opening Times 
     </span> 
     <br> 
     <br> 
     <span class="MMdaysRoot MMdaysmonday"> 
     <span class="MMdaySpan">Monday:&nbsp; 
     </span> 
     <span class="MMdayHoursSpan">9am - 8pm 
     </span> 
     </span> 
     <br> 
     <span class="MMdaysRoot MMdaystuesday"> 
     <span class="MMdaySpan">Tuesday:&nbsp; 
     </span> 
     <span class="MMdayHoursSpan">9am - 8pm 
     </span> 
     </span> 
     <br> 
     <span class="MMdaysRoot MMdayswednesday"> 
     <span class="MMdaySpan">Wednesday:&nbsp; 
     </span> 
     <span class="MMdayHoursSpan">9am - 8pm 
     </span> 
     </span> 
     <br> 
     <span class="MMdaysRoot MMdaysthursday"> 
     <span class="MMdaySpan">Thursday:&nbsp; 
     </span> 
     <span class="MMdayHoursSpan">9am - 8pm 
     </span> 
     </span> 
     <br> 
     <span class="MMdaysRoot MMdaysfriday"> 
     <span class="MMdaySpan">Friday:&nbsp; 
     </span> 
     <span class="MMdayHoursSpan">9am - 8pm 
     </span> 
     </span> 
     <br> 
     <span class="MMdaysRoot MMdayssaturday"> 
     <span class="MMdaySpan">Saturday:&nbsp; 
     </span> 
     <span class="MMdayHoursSpan">9am - 6pm 
     </span> 
     </span> 
     <br> 
     <span class="MMdaysRoot MMdayssunday"> 
     <span class="MMdaySpan">Sunday:&nbsp; 
     </span> 
     <span class="MMdayHoursSpan">11am - 5pm 
     </span> 
     </span> 
     <br> 
     <br> 
     <br> 
     <div class="links"> 
     <strong style="color: rgb(0, 0, 102);">Get directions 
     </strong> 
     <form onsubmit="GetDirectionsFromInfoBox(this, 0); return false;" id="directionsForm-1" method="post" action="" class="directions"> 
      <label for="infoboxDir1">From 
      <input type="text" id="infoboxDir1" value="birstall" class="text"> 
      </label> 
      <input type="image" class="map-submit" src="css/winter-sale-2010/images/multimap/go-button.gif"> 
     </form> 
     <a class="go-to-location" onclick="ZoomToLocation(0); return false;" href="#">Zoom to this location 
     </a> 
     </div> 
    </div> 
    </div> 
</div>

Cependant, il jette les erreurs de dire des chaînes unecapuslated. Comment puis-je faire cela s'il vous plaît?

Source

2010-12-14 sea_1987

J'ai enlevé les guillemets supplémentaires de code ainsi vous pouvez voir le différent dans la surligneur de syntaxe, qui reconnaît des chaînes correctement :) –

comment recommanderiez-vous je crée ce HTML alors, document.createElement(), non merci! –

Il suffit de stocker le tout à l'intérieur de l'élément DIV caché, appelez-le par exemple "MyRoot", puis 'var element = document.getElementById (" MyRoot "). InnerHTML;' vous donnera ce que vous voulez. De cette façon, vous ne serez pas en désordre avec des citations ou de nouvelles lignes et à moins que le contenu ne soit vraiment énorme, cela n'affectera pas le temps de chargement de la page. –

Vous avez besoin d'une barre oblique inverse à la fin de chaîne sur plusieurs lignes et quelques citations de l'encapsuler dans l'ensemble, comme ceci:

var element = '<div class="MMinfoboxRoot"> \ 
    <div class="MMinfoboxaddress"> \ 
    ....';

également que @T.J. des points si vous aviez une ' dans la chaîne (ou les guillemets que vous avez utilisés), veillez à utiliser le formulaire échappé, par exemple \' ici.

Source

2010-12-14 12:53:53

Et n'oubliez pas d'échapper les guillemets simples ou les barres obliques inverses à l'intérieur de la chaîne en les précédant d'une barre oblique inverse (si vous utilisez '' 'pour citer la chaîne, comme Nick l'a déjà indiqué). –

Tout d'abord, vous devez utiliser ' ou " pour encapsuler des chaînes de caractères.

De plus, vous devez ajouter un \ ajouter la fin de chaque ligne, sinon JavaScript ne reconnaîtra pas les chaînes multilignes.

Quelque chose comme cela fonctionnera:

var element = '<div class="MMinfoboxRoot">\ 
    <div class="MMinfoboxaddress">\ 
    <div>\ 
     <span class="MMrecordName">leicester\ 
     </span>'

Assurez-vous d'échapper à toute ' dans cette chaîne, et si vous voulez avoir la ligne que vous brise besoin d'ajouter un \n devant le \ arrière.

Source

2010-12-14 12:56:33

Vous pouvez le stocker dans une balise script ID'ed à la place:

<html> 
<head> 
<script id="htmlTemplate" type="text/x-tmpl"> 
    This <h1>is</h1> templated. 
</script> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(
     function() { 
      $('#2nd').html($('#htmlTemplate').text()); 
     } 
    ); 
</script> 
</head> 
<body> 
    <div id="1st">First div</div> 
    <div id="2nd">Second div</div> 
</body> 
</html>

Soit dit en passant, il y a un plugin jQuery en utilisant cette méthode: http://api.jquery.com/category/plugins/templates/

Source

2010-12-14 13:18:35 Flo

Voici un outil pratique que j'ai été en utilisant
http://htmltojavascript.com

Il crée automatiquement une liste des balises html, en gardant
l'empreinte. Je crois que cela en utilisant la jointure est meilleur
par rapport à la concaténation comme certains membres ont suggéré. J'ai exécuté votre code sur ce site et il semble cela fonctionne.

Source

2014-10-26 15:14:43 taesu

bloc HTML stocké comme var javascript

Répondre

Questions connexes