Атрибуты тегов, изменяющих javascript, не выполняются в правильном порядке?

Question

У меня есть html-файл, который состоит из таблицы с полями внутри. Некоторые поля отмечены xxx, которые должны быть преобразованы в текстовые поля. Это было успешно сделано, как:

function raplace() { 

    var replaced = $("body").html().replace(/xxx/g,'<textarea class="textarea" id=0 style="width: 100%; height: 100%; min-height:3em; box-sizing: border-box; resize: none; border:none"></textarea>'); 

    $('body').html(replaced); 
} 

Задача теперь присвоить имя атрибута, которое должно быть для первого текстового поля name="text1", для второй области name="text2" и так далее. Для этого я намеренно установил id=0 для всех текстовых областей, как вы можете видеть в форме кода выше. Я пытался достичь цели, используя этот код:

var i=1; 
    while (document.getElementById('0')) { 

     //$('#0')[0].name = 'text'+i; 
     //$('#0')[0].id = i; 

     document.getElementById("0").name = "text" + i; 
     document.getElementById("0").id = i; 

     //document.getElementById("0").setAttribute("name","text"+i); 
     //document.getElementById("0").setAttribute("id",i); 
     i++; 

Как вы знаете, все три кода выше работает и делает то же самое. Однако здесь возникает большая проблема.

Когда я помещаю код в консоль браузера, он делает так, как ожидалось, отлично меняя атрибуты имени и идентификатора. Однако, если код помещен в мой файл, он генерирует только текстовые поля, устанавливая все id = 0. Вторая часть скрипта (для изменения значений атрибутов) не выполняется. Я много раз смотрел по сети в течение многих дней и прибегал к просьбе здесь о переполнении стека. Если кто-нибудь сможет мне помочь, это будет потрясающе. Благодаря!!!

ПРИМЕЧАНИЕ: первая часть должна быть выполнена первой, иначе у вас не будет идентификатора для цели.

EDIT: После очистки кода немного, вот что у меня есть. Если кто-нибудь знает, почему вторая часть не выполняется, сообщите мне. Благодаря!

function raplace() { 

    var replaced = $("body").html().replace(/xxx/g,'<textarea class="replacement" style="width: 100%; height: 100%; min-height:3em; box-sizing: border-box; resize: none; border:none"></textarea>'); 

    var replacements = document.getElementsByClassName('replacement'); 
    var txtArea; 

    for (var i = 0; i < replacements.length; i++) { 
     txtArea = replacements[i]; 
     txtArea.id = "text" + i; 
     txtArea.name = "text" + i; 
    } 

$('body').html(replaced); 
} 

Answer 1

Есть несколько плохих практик в игре здесь, которые могут быть отводом с раствором:

1. Ваши идентификаторы не начинаются с буквы. См.: What are valid values for the id attribute in HTML?

2. У вас есть несколько элементов с одинаковым идентификатором.

Одно из предложений заключается в использовании класса для таргетинга ваших элементов, например.

'<textarea class="textarea replacement"' // etc 

тогда ..

var replacements = document.getElementsByClassName('replacement'), 
    txtArea; 

for (var i = 0; i < replacements.length; i++) { 
    txtArea = replacements[i]; 
    txtArea.id = "text" + i; 
    txtArea.name = "text" + i; 
}