Динамическая загрузка элементов Div и назначение идентификаторов

Я понимаю, как динамически загружать HTML, но у меня возникают проблемы с пониманием того, как я загружаю его, назначаю и отслеживаю идентификаторы элементов внутри загруженного div.

Это мой основной блок

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

Каждый блок будет вставлен ниже предыдущего загруженного. Я понятия не имею, как назначать и отслеживать различные идентификаторы, которые будут выданы во время этой операции. Мне бы хотелось решение, не связанное с jQuery. Я пытаюсь использовать ванильный JavaScript, прежде чем перейду к фреймворкам.

Я уверен, что уже может быть вопрос или блог или что-то в этом роде, но я просто не знаю лучших ключевых слов для поиска. Каждый раз, когда я использую «Динамически загружать HTML» в ключевых словах поиска, все, что я получаю, это результаты обучения AJAX.

Заранее благодарю за любую помощь!


javascript html dom dynamically-generated
person nathansizemore    schedule 08.05.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Одним из решений было бы не загружать HTML, а создавать его с помощью Javascript. Это было бы полезно в вашем случае, поскольку вы добавляете один и тот же код на страницу, только с разными идентификаторами. Я бы написал такую ​​функцию:

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

  }

Затем, чтобы получить доступ к вашим созданным идентификаторам, все, что вам нужно знать, это индекс содержащего div в вашем родительском элементе. См. здесь для решения javascript. Когда у вас есть индекс, получить данные формы так же просто, как использовать ваш индекс для запросов на основе идентификаторов.

person RestingRobot    schedule 08.05.2013
comment
Спасибо, что так хорошо объяснили и добавили ссылку для получения элементов от родителей! - person nathansizemore; 09.05.2013
comment
Без проблем! Рад помочь. - person RestingRobot; 09.05.2013

arrow_upward
1
arrow_downward

Это должно сделать это. Вам может понадобиться или не понадобиться делать elements.push(content) если вам не нужно ссылаться на эти элементы в массиве. Вместо этого можно просто повторить счетчик.

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);
}
person jmiraglia    schedule 08.05.2013