2

特定のコンポーネントを介してその場で要素が変更される状況があります。このコンポーネントは、これらの要素の innerHTML を変更しますが、要素を実際に再レンダリングするのではなく、そのコンテンツのみを再レンダリングします。これにより、最終的な DOM が最初にページにあった場合とは異なる状況が発生します。これは私にとって問題です。

このような混同の例は 次のとおりです: 次のマークアップを使用すると:

<h1 id="foo">Hi there stranger!</h1>

そして、次の JS コードを追加します。

document.getElementById('foo').innerHTML = "Hi <h2>there</h2> stranger!";

次のマークアップが得られます。

<h1 id="foo">Hi <h2>there</h2> stranger!</h1>

上記と同じようにレンダリングされます (H1 内に H2 があります) が、このマークアップが最初にページにあった場合、次のようにレンダリングされます。

<h1>Hi</h1> <h2>there</h2> <h1>stranger!</h1>

これは明らかに別のドキュメントになります。

私の質問は次のとおり です。ブラウザにこのマークアップを強制的に再レン​​ダリングさせるにはどうすればよいですか? 上記の H1 を参照して、最初にレンダリングしたのと同じ方法で再レンダリングするように指示できるようにしたいと考えています。すべての主要なエンジン (Gecko、Webkit、IE) でこれを行うにはどうすればよいですか?

4

2 に答える 2

0

これを「レンダリング」ではなく「無効なマークアップの修正の試み」と呼びます。とにかく、問題のノードよりも階層の上位にあるノードにhtmlを割り当てる必要があります。最後の手段として、全体をリロードすると機能する<body>はずです。

 document.body.innerHTML = document.body.innerHTML

別のオプションは、を使用するouterHTMLことです。つまり、次のようになります。

document.getElementById('foo').outerHTML = "<h1>Hi <h2>there</h2> stranger!</h1>";

少なくともFFでは、これは意図したとおりに機能しているように見えます。

于 2012-05-02T16:35:10.363 に答える
0

これを行う一般的なプロセスは次のようになると思います。

  1. html ノード X を見つける
  2. 新しいコンテンツ ノードを作成し、元のノード X の前に挿入します
  3. ノード X を削除します
于 2012-05-02T16:31:29.490 に答える