如何使用javascript创建通用html

how to create generic html with javascript

本文关键字：html 创建 何使用 javascript      更新时间：2023-09-26

我有以下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);
}

如果这是一段将要多次使用的代码，可以采用以下方法。

这是原始的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);
}

我把两种方法都放在了一起。

相关文章：