Установить идентификатор для элементов ввода при их динамическом создании

Question

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

function createattr() { 
    var input = document.createElement("input"); 
    input.type = "text"; 
    input.placeholder="Attribute name"; 
    input.className = "attr-textfield-style"; 
    inputval.appendChild(input); 

    //Display the drop down menu 

    var newDiv=document.createElement('div'); 
    var html = '<select>', attrtypes = typeGenerate(), i; 
    for(i = 0; i < attrtypes.length; i++) { 
     html += "<option value='"+attrtypes[i]+"'>"+attrtypes[i]+"</option>"; 
    } 
    html += '</select>'; 
    newDiv.className="attr-combobox-style"; 
    newDiv.innerHTML= html; 
    inputval.appendChild(newDiv); 

} 

Answer 1

Решено. Это была одна простая строка. Просто хотелось поделиться этим для будущих ссылок.

input.id="attr"+attrID; 

с attrID объявляется как глобальная переменная, которая увеличивается на единицу до того, как функция заканчивается так, что каждое поле ввода присваивается уникальный идентификатор

Я просто добавил строку «Аттрибут» к ID, так что combobox, выбранный вместе с этим текстовым полем, будет иметь одинаковую цифру (т. е. One pair-> текстовое поле id-attr3, combobox-type3. В следующей паре будет -> текстовое поле id-attr4, combobox-type4)

Answer 2

if элементы никогда не удаляются, вы можете подсчитать существующие элементы и указать идентификатор, например:

var newId = document.getElementsByClassName('attr-combobox-style').length; 
input.id = 'attr' + newId; 

Или вы можете использовать временную метку, это будет абсолютно уникальным:

input.id = 'attr' + new Date().getTime();