Javascript 动态加载Div元素并分配id

我知道如何动态加载HTML，但我很难理解如何加载、分配和跟踪加载的

div

中元素的ID

这是我的主要街区

<div id="add-equip-container">
    <div id="add-equip-content">
    </div>
    <button id="add-equipment">Add More Equipment</button>
    <button id="submit-equipment">Submit Equipment</button>
</div>

每个块将插入到上一个加载块的下方。我不知道如何分配和跟踪各种ID，这些ID将在这次操作中抛出。我想要一个不涉及jQuery的解决方案。在进入框架之前，我正在尝试学习普通JavaScript

我相信可能已经有一个问题或博客或关于这个东西，但我只是不知道最好的关键字搜索。每当我在搜索关键字中使用“动态加载HTML”时，我得到的都是AJAX教程结果

---

提前感谢您的帮助

这应该可以。您可能需要也可能不需要执行元素。如果不需要在数组中引用这些元素，请按（内容）。可以只迭代一个计数器

var add_equip_content = document.getElementById('add-equip-content'),
        add_equip_btn = document.getElementById('add-equipment'),
        elements = [];

add_equip_btn.addEventListener('click', addEquipment, true);

function addEquipment(event){
    var content = document.createElement('div'),
        html = '';

    content.className = 'add-equip-form';
    html += '<input id="equip_' + elements.length + '" type="text" placeholder="Equipment Description..."/></br>';
    html += '<input id="equip_' + elements.length + '" type="text" placeholder="Equipment Number"/></br>';
    html += '<input id="equip_' + elements.length + '" type="text" placeholder="Other Stuff..."/></br>';

    content.innerHTML = html;

    add_equip_content.appendChild(content);

    elements.push(content);
}

var add\u equipment\u content=document.getElementById（'add-equipment-content'），
add\u equipment\u btn=document.getElementById（'add-equipment'），
元素=[]；
添加设备添加设备列表（'click'，addEquipment，true）；
功能添加设备（事件）{
var content=document.createElement（'div'），
html=''；
content.className='添加设备表单'；
html+='
'；
html+='
'；
html+='
'；
content.innerHTML=html；
添加内容。追加子项（内容）；
元素。推送（内容）；
}

一种解决方案不是实际加载HTML，而是通过Javascript创建HTML。这在您的情况下很有用，因为您正在向页面添加相同的代码，但ID不同。我将编写如下函数：

 var form_index = 0;

 //elem is the element you are appending to.
 function addForm(elem) {

    //create the container
    var form_container = document.createElement("div");
    form_container.className = "add-equip-form";        

    //description input
    var desc = document.createElement('input');
    desc.id = "equip-desc-" + form_index;
    desc.type = "text";
    desc.placeholder = "Equipment Description...";

    //Equipment number input
    var num = document.createElement('input');
    num.id = "equip-num-" + form_index;
    num.type = "text";
    num.placeholder = "Equipment Number";

    //Other
    var other = document.createElement('input');
    other.id = "equip-other-" + form_index;
    other.type = "text";
    desc.placeholder = "Other Stuff...";

    //append inputs
    form_container.appendChild(desc);
    form_container.appendChild(num);
    form_container.appendChild(other);

    //append form
    elem.appendChild(form_container);

    form_index++;

  }

---

然后，要访问您创建的ID，您只需要知道父元素中包含div的索引。有关javascript解决方案，请参阅。有了索引后，获取表单数据就像使用索引根据ID进行查询一样简单。

感谢您的解释，并添加了从父级获取元素的链接！没问题！很乐意帮忙。

 var form_index = 0;

 //elem is the element you are appending to.
 function addForm(elem) {

    //create the container
    var form_container = document.createElement("div");
    form_container.className = "add-equip-form";        

    //description input
    var desc = document.createElement('input');
    desc.id = "equip-desc-" + form_index;
    desc.type = "text";
    desc.placeholder = "Equipment Description...";

    //Equipment number input
    var num = document.createElement('input');
    num.id = "equip-num-" + form_index;
    num.type = "text";
    num.placeholder = "Equipment Number";

    //Other
    var other = document.createElement('input');
    other.id = "equip-other-" + form_index;
    other.type = "text";
    desc.placeholder = "Other Stuff...";

    //append inputs
    form_container.appendChild(desc);
    form_container.appendChild(num);
    form_container.appendChild(other);

    //append form
    elem.appendChild(form_container);

    form_index++;

  }