动态加载div元素并分配ID

我知道如何动态加载HTML，我无法理解如何加载它，分配和跟踪加载的div中的元素的ID。动态加载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>

现在，每次add-equipment被点击，我想下面的块装入add-equip-content。

<div class="add-equip-form"> 
    <input id="?" type="text" placeholder="Equipment Description..."/></br> 
    <input id="?" type="text" placeholder="Equipment Number"/></br> 
    <input id="?" type="text" placeholder="Other Stuff..."/></br> 
</div>

每个块都会插入到前一个块的下面。我不知道如何分配和跟踪在此操作过程中将抛出的各种ID。我很喜欢不涉及jQuery的解决方案。我正在尝试在进入框架之前依靠vanilla JavaScript。

我确定这里可能有问题或博客或其他内容，但我只是不知道要搜索的最佳关键字。任何时候我在搜索关键字中使用“动态加载HTML”，我所得到的只是AJAX教程结果。

在此先感谢您的帮助！

来源

2013-05-08 nathansizemore

一个解决方案实际上不会加载HTML，而是通过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++; 

    }

然后，访问您创建的ID，所有你需要知道的是你的父母ELEM内包含div的索引。有关JavaScript解决方案，请参阅here。获得索引后，获取表单数据就像使用索引根据ID进行查询一样简单。

来源

2013-05-08 20:23:58 Jlange

感谢您解释得非常好，并添加了从父母处获取元素的链接！ – nathansizemore 2013-05-08 20:43:04

没问题！乐于帮助。 – Jlange 2013-05-08 20:53:43

这应该这样做。如果不需要引用数组中的这些元素，则可能需要或不需要执行elements.push（内容）。可以代之以迭代计数器。

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

来源

2013-05-08 20:23:09 jmiraglia

动态加载div元素并分配ID

回答

相关问题