動態加載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

回答

相關問題