javascript - DOM の変更中に html 要素を挿入する

Question

私のコードは、定義済みのクラス名を持つすべての div に HTML コンテンツを挿入する必要があります。jQuery を使用せず、少なくとも IE8 と互換性があります (したがって、getElementsbyClass はありません)。

html:

<div class="target">1</div>
<div class="target">2</div>
<div class="target">3</div>
<div class="target">4</div>

ジャバスクリプト：

var elems = document.getElementsByTagName('*'), i;
    for (wwi in elems) {
        if((' ' + elems[wwi].className + ' ').indexOf(' ' + "target" + ' ') > -1) {
            elems[wwi].innerHTML = "YES";
            //elems[wwi].innerHTML = "<div>YES!</div>";
        }
    }

ここで試すことができます。

ご覧のとおり、各 div 内に YES という単語が出力されています。コメントしてコードelems[wwi].innerHTML = "YES";を置き換えると 失敗します。elems[wwi].innerHTML = "<div>YES!</div>"div 要素を挿入すると DOM が変更され、その結果、FOR サイクルが失敗するためだと思います。私は正しいですか？

これは、innerHTML を作成するたびに for サイクルを呼び出すことで解決できます。また、コードを挿入するときに、クラス (data-codeAlreadyInserted=1 など) を追加して、次に FOR がその div に渡されたときに無視することができます。しかし、繰り返しになりますが、多くのタグを持つ平均的なサイトでは、ユーザーのブラウザーをフリーズさせることさえできるため、これは非常に悪い解決策です。

どう思いますか？各 innerHTML 呼び出しに挿入するタグの量がわからないとします。