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)">