javascript: динамически меняю атрибут name

Question

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

Вот мой сценарий:

JavaScript:

var a = 1; 
function add() { 

    var fContent = document.getElementById('1'); 
    var sContent = document.getElementById('2'); 
    if (a <= 10) { 
     a++; 
     var objTo = document.getElementById('m'); 
     var divtest = document.createElement("div"); 
     divtest.innerHTML = (sContent.innerHTML + a + fContent.innerHTML); 
     alert(divtest.innerHTML); 
     objTo.appendChild(divtest); 
    } 
} 

HTML:

<input type="button" onclick="add();" value="+" /> 
<div id="m"> 
<div id="1"> 
<input type="text" name="f"> 
<input type="text" name="l"> 
<input type="text" name="m"> 
</div> 
<div id="2"></div> 
</div> 

ВЫВОД:

2 
<input type="text" name="f"> 
<input type="text" name="l"> 
<input type="text" name="m"> 

ЗАПЛАНИРОВАННЫЕ:

2 
<input type="text" name="f2"> 
<input type="text" name="l2"> 
<input type="text" name="m2"> 

и так далее ...

Answer 1

Вы не делаете ничего, чтобы изменить атрибуты имя. Попытка внести эти изменения в html-конкатенацию приведет к неприятностям. Это поможет вам начать работу:

(function() { 
 

 
    var a = 1; 
 

 
    // get a reference to the container 
 
    var container = document.getElementById("m"); 
 
    // get a reference to the first row of input 
 
    var base = container.children[0]; 
 
    
 
    document.querySelector("button").addEventListener("click", function(e) { 
 

 
    if(++a > 10) return; 
 
    
 
    // clone the first row of input 
 
    var clone = base.cloneNode(1); 
 
    
 
    // change the number text by setting the span's textContent 
 
    clone.children[0].textContent = a; 
 
    // set the names of the input fields 
 
    clone.children[1].name = "f" + a; 
 
    clone.children[2].name = "l" + a; 
 
    clone.children[3].name = "m" + a; 
 
    
 
    // add the new row to the container 
 
    container.appendChild(clone); 
 
    
 
    console.log(clone); 
 

 
    }); 
 

 
})();

<button type="button">+</button> 
 
<div id="m"> 
 
    <div><span>1</span><input type="text" name="f1"><input type="text" name="l1"><input type="text" name="m1"></div> 
 
</div>

Если вы не хотите создать элементы с нуля ...

(function() { 
 

 
    var a = 1; 
 

 
    // get a reference to the container 
 
    var container = document.getElementById("m");  
 
    var input; 
 
    var span; 
 
    var div; 
 
    
 
    document.querySelector("button").addEventListener("click", function(e) { 
 

 
    if(++a > 10) return; 
 
    
 
    // create our div 
 
    div = document.createElement("div"); 
 
    
 
    // create and append our span 
 
    span = document.createElement("span"); 
 
    span.textContent = a; 
 
    div.appendChild(span); 
 
    
 
    // create and append inputs  
 
    ["f","l","m"].forEach(function(n){ 
 
     input = document.createElement("input"); 
 
     input.name = n + a; 
 
     div.appendChild(input);    
 
    }); 
 
       
 
    // append our div 
 
    container.appendChild(div); 
 
    
 
    console.log(div); 
 

 
    }); 
 

 
})();

<button type="button">+</button> 
 
<div id="m"> 
 
    <div><span>1</span><input type="text" name="f1"><input type="text" name="l1"><input type="text" name="m1"></div> 
 
</div>