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中包含“box”的所有元素的数组，然后以某种方式更新它们的数字，但我不知道如何做到这一切。

谢谢。

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

javascript使用渐进ID添加新元素并更新现有元素

1 个答案: