javascript - タグ属性を変更する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);
}

ここでのタスクは、最初の textarea name="text1"、2 番目の領域name="text2"などに必要な name 属性を割り当てることです。これを実現するために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++;

ご存知かもしれませんが、上記の 3 つのコードはすべて機能しており、同じことを行います。しかし、ここで大きな問題が発生します。

コードをブラウザー コンソールに入力すると、期待どおりに動作し、name 属性と id 属性が完全に変更されます。ただし、コードをファイルに入れると、テキストエリアのみが生成され、すべての id=0 が設定されます。スクリプトの 2 番目の部分 (属性値を変更する) は実行されません。私は何日もウェブ全体を見回しており、スタックオーバーフローでここに尋ねることに頼っています。誰かが私を助けることができれば、それは素晴らしいことです. ありがとう！！！

注: 最初の部分を最初に実行する必要があります。そうしないと、ターゲットにする ID がありません。

編集:コードを少し整理した後、これが私が持っているものです。2 番目の部分が実行されない理由を誰かが知っている場合は、お知らせください。ありがとう！

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);
}