Generieren von HTML mit Javascript

Question

Ich habe eine Galerie-Seite, die oft mit neuen Bildern aktualisiert wird. Ich verwende einfaches HTML, um die Fotos zu veröffentlichen. Mein momentaner Prozess ist das Kopieren und Einfügen der Tags für ein Foto und das Ändern der Nummer entsprechend dem Bilddateinamen. Z.B. Ich ändere die Nummer 047 auf 048. Copy-Paste, ändere es auf 049. Das geht so lange, bis ich die Anzahl der zusätzlichen Fotos erreicht habe. Wie Sie sehen können, ist dies sehr ineffizient und es muss einen besseren Weg geben, dies zu tun. Ich frage mich, ob es einen einfacheren Weg gibt, dies mit Javascript zu erreichen? Vielleicht generieren Sie zusätzliche Tags, indem Sie eine bestimmte Zahl oder einen bestimmten Bereich eingeben?

Alle Ideen, die diesen Prozess effizient machen würden, sind bitte willkommen! Vielen Dank!

<div class="cbp-item trim"> 
      <a href="../assets/images/trim/img-trim-047.jpg" class="cbp-caption cbp-lightbox" data-title=""> 
       <div class="cbp-caption-defaultWrap"> 
        <img src="../assets/images/trim/img-trim-047.jpg" alt=""> 
       </div> 
      </a> 
     </div> 

Answer 1

Dies würde helfen, es programmatisch zu schaffen:

var new_row = document.createElement('div'); 
new_row.className = "cbp-item trim"; 
var a = document.createElement('a'); 
a.href = "../assets/images/trim/img-trim-047.jpg"; 
a.className= "cbp-caption cbp-lightbox"; 
document.body.appendChild(a); 
var div = document.createElement('div'); 
div.className = "cbp-caption-defaultWrap"; 
var img = document.createElement('img'); 
img.src= "../assets/images/trim/img-trim-047.jpg"; 
div.appendChild(img); 
a.appendChild(div); 
new_row.appendChild(a); 

Answer 2

Wenn es nur über das Drucken HTML ist, empfehle ich Ihnen Plugins für Sublime Text-Editor wie Emmet zu verwenden.

Wenn Sie dieses Plugin installieren und sehen, wie es funktioniert, können Sie einfach einen komplexen HTML-Code auf eine Weise erstellen, die 'for' loop dies tun würde. Dies wird Ihnen helfen, nur die Bild/Link-Nummer jedes Artikels zu ändern.

Überprüfen Sie die Demo in dem Link, den ich hinzugefügt habe.

Answer 3

Hier ist ein Beispiel in Java Script, das den HTML-Code generiert, den Sie benötigen. Stellen Sie die Summe auf die Anzahl ein, die Sie zum Generieren der gewünschten Anzahl von Bildern benötigen.

var total = 47; 
 
var hook = document.getElementById('hook'); 
 

 
// Main Node for SlideShow 
 
var node = document.createElement('div'); 
 
node.classList = "cbp-item trim"; 
 

 
// Work out the correct number 
 
var n = function(int) { 
 
    var length = int.toString().length; 
 
    return length === 1 
 
    ? '00' + int 
 
    : length === 2 
 
     ? '0' + int 
 
     : length 
 
} 
 

 
// Create the item 
 
var createItem = function(int){ 
 

 
    // Create Anchor 
 
    var a = document.createElement('a'); 
 
    a.href = '../assets/images/trim/img-trim-' + (n(int)) + '.jpg" class="cbp-caption cbp-lightbox'; 
 
    a.classList = 'cbp-caption cbp-lightbox'; 
 

 
    // Create Div 
 
    var div = document.createElement('div'); 
 
    div.classList = 'cbp-caption-defaultWrap'; 
 

 
    // Create Image 
 
    var img = document.createElement('img'); 
 
    img.src = '../assets/images/trim/img-trim-' + (n(int)) + '.jpg'; 
 
    img.alt = 'gallery image'; 
 

 
    // Finalise Dom Node 
 
    var container = div.appendChild(img) 
 
    a.appendChild(div); 
 
    
 
    // Return Final Item 
 
    return a 
 
    
 
} 
 

 
// Create Items 
 
for (var i = 1; i < total + 1; i++) { 
 
    node.appendChild(createItem(i)); 
 
} 
 

 
// Append Main Node to Hook 
 
hook.appendChild(node);

<div id="hook"></div>

Answer 4

Sie könnten eine Template-Lösung verwenden. Dafür gibt es mehrere Bibliotheken, die Sie aber auch selbst implementieren können.

Dies ist eine Möglichkeit, das zu tun:

• den HTML-Code für ein Bild Legen Sie in einem script Tag, das eine Nicht-Standard language Eigenschaft hat damit der Browser es
• einige Schlüsselwörter Put einfach ignorieren wird in Dort, dass Sie ersetzen möchten, z {url}. Sie können Ihre eigene Syntax erfinden.
• diese Vorlage in eine Variable
• Im JS-Code lesen, stellt alle URLs Bilder in einem Array von Strings
• Für jedes Element in diesem Array, die Schlüsselwörter in der mit dieser bestimmten URL-Vorlage Zeichenfolge ersetzen, und verketten alle diese resultierenden HTML-Schnipsel.
• Inject das resultierende HTML an die entsprechende Stelle im Dokument.

Hier ist ein Ausschnitt, das zu tun:

// Add new images here: 
 
var images = [ 
 
    "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/330px-SNice.svg.png", 
 
    "https://nettemarie357.files.wordpress.com/2014/09/smiley-face.jpg?w=74&h=74", 
 
]; 
 

 
// Load the template HTML 
 
var template = document.querySelector('script[language="text/template"]').innerHTML; 
 
// Use template to insert all the images: 
 
container.innerHTML = images.map(url => template.replace(/{url}/g, url)).join('');

img { max-width: 50px }

<div id="container"></div> 
 

 
<script language="text/template"> 
 
    <div class="cbp-item trim"> 
 
     <a href="{url}" class="cbp-caption cbp-lightbox" data-title=""> 
 
      <div class="cbp-caption-defaultWrap"> 
 
       <img src="{url}" alt=""> 
 
      </div> 
 
     </a> 
 
    </div> 
 
</script>