使用Javascript生成html

Question

我有一個畫廊頁面，經常更新新圖像。我使用簡單的HTML來發布照片。我目前的過程是複製並粘貼照片的一組標籤，並更改數字以符合圖像文件名稱。例如。我將數字047更改爲048.複製粘貼，將其更改爲049.這一直持續到我已經達到額外照片的數量。正如你所看到的，這是非常低效的，並且必須有更好的方式來做到這一點。我想知道是否有一個更簡單的方法來實現這與Javascript？也許通過輸入一定的數字或範圍來生成額外的標籤？

任何想法，這將使這個過程高效率的歡迎！謝謝！

<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

這將幫助您創建編程它：

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

如果它僅僅是有關打印HTML，我建議你使用插件，像Emmet的崇高文本編輯器。

當你安裝這個插件，看看它是如何工作的，你可以用'for'循環的方式簡單地創建一個複雜的html。這將幫助您僅更改每個項目的圖像/鏈接編號。

檢查我添加的鏈接中的演示。

Answer 3

下面是Java Script中的一個例子，它將生成您將需要的html。將總數設置爲您需要生成所需圖像數量的數字。

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

你可以使用一個模板解決方案。有幾個庫，但你也可以自己實現它。

下面是做到這一點的一種方法：

• 把HTML的一個圖像中具有非標準language財產script標記，以便瀏覽器會忽略它
• 把一些關鍵字那裏你會想要替換，例如{url}。你可以發明自己的語法。
• 閱讀模板入變量
• 在JS代碼，把所有的圖像的URL字符串中
• 對於陣列中的每個元件的陣列，與該特定URL替換的關鍵字在模板串，並連接所有這些生成的HTML片段。
• 將生成的HTML注入到文檔中的適當位置。

這裏是一個片段這樣做：

// 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>