如何使用 javascript 创建通用 html

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>

我想用 Javascript 构建位于 <div id="prog"> 内的 HTML：

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