javascript爲漸進ID添加新元素並更新現有的元素

Question

我已經在每個頁面上有3個現有的盒子（div），每個盒子都有唯一的ID（1,2,3）。我想每個人都有一個按鈕，允許用戶在下面添加新的框。這些框應該遵循現有的編號。但是，這樣做也意味着更新新版本下已存在的框的ID，以便數字匹配。

這是我的代碼：

function add_box(n) { 
    document.getElementById("box"+(n<)).setAttribute("id", "box"); 
    var div = document.createElement("div"); 
    div.id="box"+(n+1); 
    var txt = document.createTextNode("A new box"); 
    div.appendChild(txt); 

    var newbox = document.getElementById("box"+n); 
    insertAfter(div,newbox); 
    } 

HTML

<div id="box1">Whatever</div><input type="button" onclick="add_box(1)"> 
<div id="box2">Whatever</div><input type="button" onclick="add_box(2)"> 
<div id="box3">Whatever</div><input type="button" onclick="add_box(3)"> 

它顯然不工作，因爲我想我需要與所有包含「盒子」的ID元素的數組和然後以某種方式更新他們的數字，但我不知道如何做到這一點。

謝謝。

Answer 1

以下是你所要求的，但我懷疑它不是你想要的結果。

<script> 

// Append a new div after one with id boxn 
function add_box(n) { 
    var el = document.getElementById('box' + n); 
    var div = document.createElement('div'); 

    div.id = 'box' + ++n; 
    div.appendChild(document.createTextNode('New box ' + n)); 
    el.parentNode.insertBefore(div, el.nextSibling); 
    renumberDivs(div, n); 
} 

// Renumber all sibling divs after el 
function renumberDivs(el, n) { 

    // Note assignment, not equality 
    while (el = el.nextSibling) { 
    if (el.tagName && el.tagName.toLowerCase() == 'div'){ 
     el.id = 'box' + ++n; 
    } 
    } 
} 
</script> 

<div id="box1">Whatever</div><input type="button" value="add below 1" onclick="add_box(1)"> 
<div id="box2">Whatever</div><input type="button" value="add below 2" onclick="add_box(2)"> 
<div id="box3">Whatever</div><input type="button" value="add below 3" onclick="add_box(3)"> 

請注意，在上述中，數字作爲參數傳遞，它們被視爲數字，但在用於ID值時也會隱式轉換爲字符串。這種類型轉換並不是很喜歡，可以考慮使用更明確的方法。

點擊幾下後，你可能會喜歡的東西：

<div id="box1">Whatever</div> 
<div id="box2">New box 2</div> 
<div id="box3">New box 3</div> 
<div id="box4">New box 4</div> 
<div id="box5">New box 4</div> 
<div id="box6">New box 4</div> 
<div id="box7">New box 2</div><input type="button" value="add a box" onclick="add_box(1)"> 
<div id="box8">Whatever</div><input type="button" value="add a box" onclick="add_box(2)"> 
<div id="box9">Whatever</div><input type="button" value="add a box" onclick="add_box(3)">