如何使用javascript创建通用html

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

价格表：
pdf文件

我想要用Javascript构建

中的HTML：

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

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);
}

我正在尝试使用此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);
}

var-tmpDocument、tmpAnchorTagPdf、tmpAnchorTagXls、parentContainer、i；
parentContainer=document.getElementById（'prog'）；
对于（i=0；i

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

这是原始的

div

，没有您要创建的代码：

<div id="prog" class="downloads clearfix">
</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（）

函数：

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

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);
}

---

我整理了一份报告。

你能描述一下发生了什么事吗？你有错误吗？如果是，错误是什么？您得到的输出是否与您想要的不匹配？如果是这样的话，不希望的输出是什么？它与期望的输出有何不同？为什么不将html作为字符串并执行$（'#prog'）.html（varHTML）；我不知道怎么做这可能会有帮助：你确定jQuery标记是正确的吗？你的代码在任何地方都没有提到jQuery。更好的是：除了标记之外，使用模板元素，问题可能不是关于jQuery，看看OP在哪里都如何使用它（实际上是oppsote）。我喜欢它（

模板

对象）。我没有意识到这一点。尽管如此，我认为在这种情况下，他拥有的图像可能已经加载，并且在将

div

添加到DOM时不必加载，这可能会很好。在阅读有关

模板的文章时，

图像不预加载。@Ingo Bürk：我在回答后注意到了你上面的评论。。我目前也在开发非Jquery解决方案。非Jquery：