Question

我正在使用JavaScript来动态添加div。 div应包含一个表单输入，其名称为＆＃39;属性WILL将逐步更改值。

我设法做到了这一点 - 但我有两个问题。

第一个问题：

我创建的第一个div被下一个动态创建的div取消。

因此，当我提交表格时，第一个动态创建的输入表格是空白的 - 但后来的人对他们有价值。

我的代码：

HTML

<div id="dynamicDivSection"></div>

<button id="addbutton">add box</button>

 <div id="boxes">
   <div class="box">
       <input type="text" id='dynamic-imput' name="">   
   </div>
</div>

javascript

var addbutton = document.getElementById("addbutton");
var key = 1; 

addbutton.addEventListener("click", function() {
  key++;
  document.getElementById('dynamic-imput').name = 'ser['+key+'][\'name\']';

  var boxes = document.getElementById("boxes");
  var head  = document.getElementById("dynamicDivSection");

  var clone = boxes.firstElementChild.cloneNode(true);
  head.appendChild(clone);
});

我怀疑问题是由此导致的：

document.getElementById（＆＃39; dynamic-imput＆＃39;）。name = ＆＃39; SER [＆＃39; +键+＆＃39;] [\＆＃39;名\＆＃39;]＆＃39 ;;

即当我创建动态div时，它会在页面上创建包含相同Id的多个输入。如果我是正确的，那么也许解决方案是更改新创建的输入的ID - 但是，我不知道如何更改动态创建的输入的Id。

第二个问题。

我希望每个动态创建的div都能到达页面顶部;即要放在先前创建的动态div之前 - 但是，此时每个动态创建的div都直接位于第一个动态创建的div之下。

Answer 1

您可以插入第一个孩子：

parent.insertAdjacentElement('afterbegin', nodeToInsert);

您可以使用setAttribute和getAttribute获取和设置id等属性。虽然我不确定你为什么在这里需要一个ID，但是没有一个并且选择带有类的元素会更简单。

var addbutton = document.getElementById("addbutton");
var key = 1; 

addbutton.addEventListener("click", function() {
  key++;
  document.getElementById('dynamic-imput').name = 'ser['+key+'][\'name\']';

  var boxes = document.getElementById("boxes");
  var head  = document.getElementById("dynamicDivSection");

  var clone = boxes.firstElementChild.cloneNode(true);
  var clonedInput = clone.firstElementChild;
  clonedInput.setAttribute('id', clonedInput.getAttribute('id') + '-' + head.children.length);

  head.insertAdjacentElement('afterbegin', clone);
});

<div id="dynamicDivSection"></div>

<button id="addbutton">add box</button>

 <div id="boxes">
   <div class="box">
       <input type="text" id='dynamic-imput' name="">   
   </div>
</div>

JavaScript-动态地向页面添加输入

1 个答案: