JavaScript-動態地將輸入添加到頁面

Question

我使用JavaScript來即時添加div。 div應該包含一個表單輸入，其'name'屬性將以增量方式更改值。

我設法做到了這一點 - 但我有兩個問題。

第一個問題：

我創建由下一個動態創建的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（'dynamic-imput'）。name = 'ser ['+ key +'] [\'name \']';

即當我創建動態的div它會創建一個包含相同的ID在頁面上幾個輸入。如果我是正確的，那麼也許解決方法是更改​​新創建的輸入的Id - 但是，我不知道如何更改動態創建的Imput的Id。

第二個問題。

我希望每個動態創建的div轉到頁面的頂部;即放置在先前創建的動態div之前 - 但是，此刻每個動態創建的div直接位於第一個動態創建的div之下。

Answer 1

可以作爲第一個孩子插入：

parent.insertAdjacentElement('afterbegin', nodeToInsert); 

您可以獲取和設置屬性，如id與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>