javascript добавляет новые элементы с прогрессивными идентификаторами и обновляет существующие

Question

У меня уже есть 3 существующих ящика на странице (divs) с уникальным идентификатором (1,2,3) каждый. Я хочу, чтобы у каждой кнопки была кнопка, которая позволяет пользователю добавлять новые поля прямо ниже. Эти поля должны соответствовать уже существующей нумерации. Тем не менее, выполнение этого также подразумевает обновление идентификаторов уже существующих ящиков под новыми, чтобы номера совпадали.

Это мой код:

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