Именование в функции внутри JavaScript

Question

У меня это внутри моего <table>, и имя в моей функции addFields(), похоже, не работает ... Кто-нибудь знает, какая альтернативная строка кода мне нужна для этого document.getElementById('materials') += "<name='"+iteration2+"'>";?

HTML:

<td> 
    <p id="addFields"> 
     <input type="number" required name="productquantity1" min="1" max="1000"> 
     <select name="productline1" id="materials"> 
      <option value="123">123</option> 
     </select> 
    </p> 
</td> 
<td valign="top"> 
    <button type="button" onclick="addFields();">+</button> 
</td> 

JavaScript:

var counter = 2; 
    function addFields() { 
     var iteration2 = "productline" + counter; 

     var select = document.getElementById('materials').cloneNode(true); 
     document.getElementById('materials') += "<name='"+iteration2+"'>"; //does not work 
     document.getElementById('addFields').appendChild(select); 
     counter++; 
    } 

Answer 1

Просто select.name = iteration2;

MDN Reference

Answer 2

Может быть, вы должны делать:

document.getElementById('materials').innerHTML += "<name='"+iteration2+"'>"; 

Вы складывали строку самого элемента. Используйте innerHTML, чтобы выполнить это.

Answer 3

использование setAttribute

var counter = 2; 
function addFields() { 
    var iteration2 = "productline" + counter; 

    // clone select tag 
    var select = document.getElementById('materials').cloneNode(true); 
    // change cloned tag name 
    select.setAttribute ('name', iteration2); 
    // add to parent 
    document.getElementById('addFields').appendChild(select); 

    counter++; 
}