如何創建通用HTML與JavaScript

Question

我有以下的html：

<div id="prog" class="downloads clearfix"> 
    <div class="item"> 
     <div class="image_container"> 
      <img src="/img/downloads/company.png" width="168" height="238" alt=""> 
     </div> 
     <div class="title"> 
      pricelist: <label id="pr1"></label> 
     </div> 
     <div class="type"> 
      pdf document 
     </div> 
     <div class="link"> 
      <a id="pdfdocument" class="button" target="_blank" href="#">start Download </a> 
     </div> 
    </div> 
</div> 

我想建立的HTML這是<div id="prog">使用JavaScript裏面：

<div id="prog" class="downloads clearfix"></div> 

我想使用此Javascript ，但沒有成功：

var tmpDocument, tmpAnchorTagPdf, tmpAnchorTagXls, parentContainer, i; 
parentContainer = document.getElementById('prog'); 

for (i = 0; i < documents.length; i++) { 
    tmpDocument = documents[i]; 
    tmpAnchorTagPdf = document.createElement('a id="pdfdocument" '); 
    tmpAnchorTagPdf.href = '/role?element=' + contentElement.id + '&handle=' + ope.handle; 
    tmpAnchorTagPdf.innerHTML = 'start Download'; 

    tmpAnchorTagXls = document.createElement('a'); 
    tmpAnchorTagXls.href = '/role?element=' + contentElement.id + '&handle=' + ope.handle; 
    tmpAnchorTagXls.innerHTML = 'start Download'; 

    parentContainer.appendChild(tmpAnchorTagPdf); 
    parentContainer.appendChild(tmpAnchorTagXls); 
} 

Answer 1

如果這是一段代碼，您將使用更多比一次，你可以採取以下方法。

原來這裏是div沒有代碼，你要創建：

<div id="prog" class="downloads clearfix"> 
</div> 

在一個隱藏的div像創建模板：

<div id="itemtemplate" style="display: none;"> 
    <div class="item"> 
     <div class="image_container"> 
      <img src="/img/downloads/company.png" width="168" height="238" alt=""> 
     </div> 
     <div class="title"> 
      pricelist: <label></label> 
     </div> 
     <div class="type"> 
      pdf document 
     </div> 
     <div class="link"> 
      <a class="button" target="_blank" href="#">start Download </a> 
     </div> 
    </div> 
</div> 

然後使用jQuery複製它（OP最初有jQuery的標籤;請參閱下面的JS），更新複製DIV一些HTML，然後將其添加到文檔

function addItem() { 
    var item = $("#itemtemplate div.item").clone(); 

    //then you can search inside the item 
    //let's set the id of the "a" back to what it was in your example 
    item.find("div.link a").attr("id", "pdfdocument"); 

    //...the id of the label 
    item.find("div.title label").attr("id", "pr1"); 

    //then add the objects to the #prog div 
    $("#prog").append(item); 
} 

更新

下面是使用純JavaScript這個例子一樣addItem()功能：

function JSaddItem() { 
    //get the template 
    var template = document.getElementById("itemtemplate"); 

    //get the starting item 
    var tempitem = template.firstChild;  

    while(tempitem != null && tempitem.nodeName != "DIV") { 
     tempitem = tempitem.nextSibling; 
    } 
    if (tempitem == null) return; 

    //clone the item 
    var item = tempitem.cloneNode(true); 

    //update the id of the link 
    var a = item.querySelector(".link > a"); 
    a.id = "pdfdocument"; 

    //update the id of the label 
    var l = item.querySelector(".title > label"); 
    l.id = "pr1"; 

    //get the prog div 
    var prog = document.getElementById("prog"); 

    //append the new div 
    prog.appendChild(item); 
} 

我放在一起JSFiddle with both approaches here。