Как добавить тег span и дать каждому идентификатору новое имя

Question

У меня есть 3 входа, которые расположены внутри тега span (я использую span, а не li, потому что у меня много ликов в моем коде). У меня есть функция javascript, которая добавляет каждый тег span (который включает в себя 3 входа). Мне нужно, чтобы каждый вход имел определенное имя. Не уверен, как это сделать, я изучаю javascript прямо сейчас, так что простите меня за то, что я ноб.

В моей функции у меня есть appendchild, работающий для тега span. В нижней части кода у меня есть цикл for, который я написал для добавления ul/li, и это имя работает. Но я не могу получить такую ​​же функциональность для работы с тегами span.

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

Вот мой код до сих пор:

  function budgetList(){ 

      var elmnt = document.getElementsByTagName("SPAN")[0]; 
      var cln = elmnt.cloneNode(true); 
      var budgetListing = document.getElementById("budget-listing"); 
      var append = budgetListing.appendChild(cln); 

      var expenseName = document.getElementById('expenseName'); 
      var expectedExpense = document.getElementById('expectedExpense'); 
      var actualExpense = document.getElementById('actualExpense'); 


      var ul = document.createElement("ul"); 
      document.body.appendChild(li); 

      for(var i = 0; i <= 0; i++){ 
       var li = document.createElement("li"); 
       li.className = "budget-list" + i; 

       var a = document.createElement("a"); 
       a.innerHTML = "<input type='text'>"; 
       // a.innerHTML = "Subfile " + i; 

       var att = document.createAttribute("class"); 
       att.value = "budgeting" + i; 


       li.appendChild(a); 
       ul.appendChild(li); 

      } 

     } 

Вот HTML-

 <button onclick="budgetList()">Add New Row</button> 
     <input type="button" value="save" onclick="save()" /> 
     <ul id="budget-listing"> 
      <span> 
       <input type="text" id="expenseName"> 
       <input type="text" id="expectedExpense"> 
       <input type="text" id="actualExpense"> 
      </span>   
     </ul> 

Answer 1

Несколько вещей ...

1)<ul> Стенды для списка неупорядоченными и <ul> элементы ожидают, что их дети будут <li> элементов (которые вы можете запомнить как элемент списка). Таким образом, хотя некоторые браузеры могут простить вас, добавляя промежутки к вашему тегу <ul>, это не считается хорошей практикой. И технически violation of the standard

2) Ваш цикл будет работать только один раз. Вы увидите, что он начинается с переменной i, инициализированной в 0, и будет работать только до i<=0, которая будет только когда-либо на первой итерации, потому что после этого вы увеличиваете (i++), что означает, что второй раз через i будет равен 1 и 1 равен Не меньше или равно 0. Таким образом, в этом случае нет необходимости использовать цикл вообще.

3) Ваш код немного несвязан с запрошенным вами и тем, что предлагает контекст страницы. Мне кажется, когда пользователь нажимает кнопку, которую вы хотите дублировать с помощью трех входов. Если это действительно так, то я предлагаю следующее решение ...

function budgetList(){ 
     // You get the span that will serve as a template, good 
     var elmnt = document.getElementsByTagName("SPAN")[0]; 

     // you clone it, good 
     var cln = elmnt.cloneNode(true); 

     //next we want to modify the IDs of the child spans. 
     // A good way to do this is to use a unique number that will change with every step 
     // There a few ways to get a unique number each time 
     // I propose taking the number of span groups 
     var budgetListing = document.getElementById("budget-listing"); 
     var uniqueNumber = budgetListing.childNodes.length; 

     // Now we update all the ids using the unique number 
     cln.getElementsByTagName('INPUT')[0].setAttribute('id', "expenseName_"+uniqueNumber); 
     cln.getElementsByTagName('INPUT')[1].setAttribute('id', "expectedExpense_"+uniqueNumber); 
     cln.getElementsByTagName('INPUT')[2].setAttribute('id', "actualExpense_"+uniqueNumber); 

     // and write our new span group into the container 
     budgetListing.appendChild(cln); 
} 

Позвольте мне знать, если я сделал неправильные предположения, или если это близко к тому, что вы запрашиваете. JavaScript и его взаимодействие с HTML могут сбивать с толку сначала, но придерживаться его!

EDIT: Не понимаю, getElementById не была функция ... Заменено getElementsByTagName