Dynamically Load Div Elements and Assign IDs

Question

I understand how to dynamically load HTML, I am having trouble understanding how I load it, assign, and keep track of IDs for elements inside the loaded div.

This is my main block

<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>

Now, every time add-equipment is clicked, I want to load the following block into 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>

Each block would be inserted beneath the previous one loaded. I have no idea how to assign and keep track of the various IDs that will be dished out during this operation. I would love a solution that does not involve jQuery. I am trying to lean vanilla JavaScript before I get into frameworks.

I am sure there may be a question or blog or something on this already, but I just don't know the best keywords to search for. Any time I use "Dynamically Load HTML" in the search keywords, all I get is AJAX Tutorial results.

Thanks in advance for any help!

score 2 · Accepted Answer · edited May 23 '17 at 12:21

One solution would be not actually load the HTML, but to create it via Javascript. This would be useful in your case as you are adding the same code to the page, only with different ID's. I would write a function like this:

 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++;

  }

Then, to access your created ID's, all you need to know is the index of the containing div within your parent elem. See here for a javascript solution. Once you have the index, getting the form data is as easy as using your index to query based on ID's.

Thanks for explaining so well and adding the link for grabbing elements from parents! — nathansizemore, May 08 '13 at 20:43

score 1 · Answer 2 · answered May 08 '13 at 20:23

This should do it. You may or may not need to do the elements.push(content) if you don't need to refer back to these elements in an array. Could just iterate a counter instead.

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

Dynamically Load Div Elements and Assign IDs

2 Answers2