单击按钮后，增加divit，为javascript中的每个字段提供动态ID

我有一个场景，用户点击

按钮

可以用相同的

HTML

添加多达

12个
div。其html格式如下所示

<div id="dvNPEAddData">
  <div id="dvNPEInnerData">
    <label>Terminated route name</label>
    <input type="text" id="txtTerRouteName" />

    <label>Cable Type</label>
    <select id="ddlCableType">
            <option value="--Select--">--Select--</option>
      <option value="G652">G652</option>
      <option value="G655">G655</option>
        </select>

    <label>Cable Size</label>
    <select id="ddlCableSize">
            <option value="--Select--">--Select--</option>
            <option value="12F">12F</option>
            <option value="24F">24F</option>
            <option value="48F">48F</option>
    </select>

    <label>No of Live Fibre</label>
    <input type="text" id="txtNoLiveFibre" />
  </div>
</div>

正确生成div，但问题是未生成每个控件的
ID
，如
input=text
和
select

那么，我应该如何使用它，以便它可以使用动态
ID

试试下面的代码

var appendNewId=1;
function addNPEInfo(){
    if(appendNewId>12){
        alert("Maximum 12 rows allowed");
        return;
    }
    var div = document.getElementById('dvNPEInnerData'),
    clone = div.cloneNode(true); 

    appendId(clone, "div", appendNewId);
    appendId(clone,"select", appendNewId);
    appendId(clone,"input", appendNewId);
    appendId(clone,"label", appendNewId);

    clone.id = "dvNPEInnerData"+appendNewId;
    //document.body.appendChild(clone);
    document.getElementById('dvNPEAddData').appendChild(clone);
    appendNewId++;
}
function appendId(clone,tag, id){
    var ele = clone.getElementsByTagName(tag);
    for(i in ele){
        ele[i].id = ele[i].id+id;
    }
}

根据您的需要更改appendNewId的值。
我想我们就快到了，这就是它产生的结果。内部div id没有递增。看看生成的html@BNN，我将appendNewId提取为全局，你能用新代码检查一下吗？现在很完美，这里还有一件事。我希望用户限制到12个div。那么，我应该如何停止并提示您可以添加超过12个div'sinside addNPEInfo的消息检查appendNewId的值（如果大于等于12），然后显示警报框并返回。是的，您可以使用它进行更新以便我可以接受它作为答案：）
var div = document.getElementById('dvNPEInnerData'),
    clone = div.cloneNode(true);
 clone.id = "dvNPEInnerData1";
 //document.body.appendChild(clone);
 document.getElementById('dvNPEAddData').appendChild(clone);

var appendNewId=1;
function addNPEInfo(){
    if(appendNewId>12){
        alert("Maximum 12 rows allowed");
        return;
    }
    var div = document.getElementById('dvNPEInnerData'),
    clone = div.cloneNode(true); 

    appendId(clone, "div", appendNewId);
    appendId(clone,"select", appendNewId);
    appendId(clone,"input", appendNewId);
    appendId(clone,"label", appendNewId);

    clone.id = "dvNPEInnerData"+appendNewId;
    //document.body.appendChild(clone);
    document.getElementById('dvNPEAddData').appendChild(clone);
    appendNewId++;
}
function appendId(clone,tag, id){
    var ele = clone.getElementsByTagName(tag);
    for(i in ele){
        ele[i].id = ele[i].id+id;
    }
}