Javascript 使用jQuery（动态）向dom添加新元素时缺少name属性

我在下面有一个JavaScript函数，它将动态地向DOM添加一个新元素。除了没有添加名称属性或ID值之外，没有问题

我希望实现的最终目标是能够动态地将元素添加到流程中，然后能够通过jQuery serialize保存该流程，而无需页面刷新。简单地说，可以将任务添加/删除到项目中。动态添加是我正在努力解决的问题

以下是我到目前为止的精简代码：

<div id="itemList">
    <div><input class="textInput" name="input_1"  id="input_1" type="text" /></div>
    <div><input class="textInput" name="input_2"  id="input_2" type="text" /></div>
    <div><input class="textInput" name="input_3"  id="input_3" type="text" /></div>
</div>
<div><a href="javascript:void('');" id="addNewInputField" onClick="addNewInputField();">Add New Task</a></div>

<script type="text/javascript">
function addNewInputField(){
    elParentContainer = document.getElementById('itemList');
    newElement = document.createElement('div');
    newInput = document.createElement('input');
    newInput.setAttribute('class', 'textInput');
    newInput.setAttribute('type', 'text');      
    newElement.appendChild(newInput);
    elParentContainer.appendChild(newElement);
}
</script>

这是我当前在单击“添加新任务”两次时获得的输出源：

Here is the what I'm currently getting when you view source:

<div id="itemList">
    <div><input class="textInput" name="input_1" id="input_1" type="text"></div>
    <div><input class="textInput" name="input_2" id="input_2" type="text"></div>
    <div><input class="textInput" name="input_3" id="input_3" type="text"></div>
    <div><input class="textInput" type="text"></div>
    <div><input class="textInput" type="text"></div>
</div>

以下是查看源代码时所需的输出：

<div id="itemList">
    <div><input class="textInput" name="input_1" id="input_1" type="text"></div>
    <div><input class="textInput" name="input_2" id="input_2" type="text"></div>
    <div><input class="textInput" name="input_3" id="input_3" type="text"></div>
    <div><input class="textInput" name="input_4" id="input_4" type="text"></div>
    <div><input class="textInput" name="input_5" id="input_5" type="text"></div>
</div>

---

有人能帮助我修改我的函数来增加新添加的DOM元素吗？

你可以考虑更新你的函数来查看函数中有多少当前元素，并在创建新元素时使用它们来设置你的ID和名称属性：

<script type="text/javascript">
  function addNewInputField(){
      // Set how many elements you have with that class (to determine which
      // value to append to 'input_{x}'
      var currentInput = document.getElementsByClassName('textInput').length + 1;
      elParentContainer = document.getElementById('itemList');
      newElement = document.createElement('div');
      newInput = document.createElement('input');
      newInput.setAttribute('class', 'textInput');
      // Set your new ID attribute
      newInput.setAttribute('id', 'input_' + currentInput);
      // Set your new name attribute
      newInput.setAttribute('name', 'input_' + currentInput); 
      newInput.setAttribute('type', 'text');      
      newElement.appendChild(newInput);
      elParentContainer.appendChild(newElement);
  }
</script>

您可以在下面查看输出标记的外观和示例：

---

实现这一点的一种方法是检索集合的最后一个子级，然后使用它的一个属性来了解当前索引。一旦检索到该元素，就可以很容易地将具有正确内容的属性添加到新创建的元素中：

function addNewInputField(){
    var elParentContainer = document.getElementById('itemList');

    //Get last child of list
    var inputList = elParentContainer.getElementsByTagName('input');
    var lastChild = inputList[inputList.length-1];

    //Get last index from the name attribute of last child
    var lastIndex = lastChild.getAttribute('name').split('_')[1];

    var newElement = document.createElement('div');
    var newInput = document.createElement('input');
    newInput.setAttribute('class', 'textInput');
    newInput.setAttribute('type', 'text');
    //Add new attributes to the newly created element
    newInput.setAttribute('name', 'input_'+(lastIndex++));
    newInput.setAttribute('id', 'input_'+(lastIndex++));   
    newElement.appendChild(newInput);
    elParentContainer.appendChild(newElement);
}

---

您是否尝试过Jquery.append功能

希望这能解决您的问题，您可以使用它来创建动态元素并在页面中附加任何文本

请查看示例并尝试此链接，您将获得更好的想法

如果需要更多的支持，请告诉我

谢谢，

---

如果你想使用jQuery，请考虑使用类似的代码：

---

另外，使用数据属性可能更合适，你可以考虑。

基于你的精简版本，你可以跟踪你有多少输入，并用每一个新的加法更新它们。这是一个基于您提交的代码的解决方案

   <div id="itemList">
<div><input class="textInput" name="input_1"  id="input_1" type="text" /></div>
<div><input class="textInput" name="input_2"  id="input_2" type="text" /></div>
<div><input class="textInput" name="input_3"  id="input_3" type="text" /></div>

---

您可以只计算容器有多少子元素，然后动态创建下一个元素的id和名称

function addNewInputField(){
elParentContainer = document.getElementById('itemList');
var next_input = elParentContainer.children.length+1
newElement = document.createElement('div');
newInput = document.createElement('input');
newInput.setAttribute('class', 'textInput');
newInput.setAttribute('type', 'text');      
newInput.setAttribute('name', 'input_'+next_input);      
newInput.setAttribute('id', 'input_'+next_input);   
newElement.appendChild(newInput);
elParentContainer.appendChild(newElement);

---

}

您可以跟踪当前输入的数量。这样，在创建新输入时，设置所需的属性就更容易了

     <script type="text/javascript">
        var inputCounter =  3;
     function addNewInputField(){
        var name = "input_";
        inputCounter= inputCounter+1;
        name = name.concat(inputCounter);
        elParentContainer = document.getElementById('itemList');
        newElement = document.createElement('div');
        newInput = document.createElement('input');
        newInput.setAttribute('class', 'textInput');
        newInput.setAttribute('type', 'text');
        newInput.setAttribute('name', name);
        newInput.setAttribute('id', name);      
        newElement.appendChild(newInput);
        elParentContainer.appendChild(newElement);
    }

   </script>

---

如果我不清楚你的问题陈述，请告诉我你到底需要什么。我需要输入字段，而不仅仅是在列表中添加文本。但是谢谢你的贡献。对任何人-这一点，如果能指出答案有什么问题，那就太好了-1你的答案不是我的错，但你的解决方案为我产生了一个错误：Uncaught TypeError:lastChild.getAttribute不是一个函数此解决方案也起作用，回答了关于如何修改函数的问题。此解决方案也起作用，回答了关于如何修改函数的问题修改函数。最初的问题是关于修改函数，但我认为这是正确的，因为解决方案是如此干净。我想看看你的答案是使用数据属性，以及为什么你认为它更合适。如果你想保存更多的数据而不仅仅是你的ID，那么数据属性非常有用。例如，如果我在编辑表单上，我就使用它。也可以在其中保存日期或完整的javascript对象。有时这很方便。但在其他情况下，ID和名称就足够了：这是一个很好的观点。我还需要父ID，因此将其作为数据属性包含将消除遍历DOM以获取它的需要。谢谢你的提示！实现了您的解决方案和数据id属性，并且工作得非常出色。只是想为优雅的解决方案提供更多道具。

function addNewInputField(){
elParentContainer = document.getElementById('itemList');
var next_input = elParentContainer.children.length+1
newElement = document.createElement('div');
newInput = document.createElement('input');
newInput.setAttribute('class', 'textInput');
newInput.setAttribute('type', 'text');      
newInput.setAttribute('name', 'input_'+next_input);      
newInput.setAttribute('id', 'input_'+next_input);   
newElement.appendChild(newInput);
elParentContainer.appendChild(newElement);

     <script type="text/javascript">
        var inputCounter =  3;
     function addNewInputField(){
        var name = "input_";
        inputCounter= inputCounter+1;
        name = name.concat(inputCounter);
        elParentContainer = document.getElementById('itemList');
        newElement = document.createElement('div');
        newInput = document.createElement('input');
        newInput.setAttribute('class', 'textInput');
        newInput.setAttribute('type', 'text');
        newInput.setAttribute('name', name);
        newInput.setAttribute('id', name);      
        newElement.appendChild(newInput);
        elParentContainer.appendChild(newElement);
    }

   </script>