2

ユーザーが以前に選択した内容に応じて、さまざまな入力を表示する Web フォームを開発しています。だから私は、空のdivを持ち、innerHTMLで内容を変更することと、いくつかのdiv要素を持ち、表示をnoneに設定し、ユーザー入力に応じて表示するものを変更することの違いは何だろうと思っていました。

ありがとう!

4

5 に答える 5

2

一般に、createElement や appendChild などの JavaScript コマンドを使用する代わりに、できるだけ innerHTML に触れないようにする必要があります。

多くの innerHTML 操作は、javascript のアンチパターンと見なされます。

とはいえ、フォームが 1 つまたは 2 ~ 3 つある場合は、自分に合った方法で作業を進めてください。理解しやすく、保守しやすいコードと見なされるものを意味します。

これらの規模では、どちらのアプローチを使用してもパフォーマンスの向上/低下に気付く人はいないでしょう。個人的には、おそらく表示をなしに設定します。

于 2012-06-21T18:18:24.303 に答える
2

ほとんどの場合、要素を作成してから破棄するよりも、必要に応じて要素を表示および非表示にする方がはるかに効率的です。

これは主に、ノードをドキュメントに追加する操作innerHTMLが高度に最適化されていても、計算コストがかかるためです。第二に、要素を破棄すると、それらの要素に格納されているすべてのイベント ハンドラーを破棄することにもなるため、それらを再バインドする必要があり、当然時間と不要なコードが必要になります。

もう 1 つの利点は、ユーザーが Javascript を無効にした場合、またはスクリーン リーダーなど、Javascript をサポートしていないブラウザーを使用している場合、Javascript が機能しないことです。すべての要素が元の HTML に存在する場合、そのページはこれらのユーザーにとって少なくともある程度意味のあるものになります。

于 2012-06-21T18:19:37.037 に答える
1

div の準備ができている場合は、表示を変更するだけです。

  • コードはよりシンプルです
  • コンテンツの保存場所が 1 つしかない (div)
  • dom はエンジンによって再計算される必要はありません

これは、たとえばタブを扱う場合の標準的なソリューションです。

于 2012-06-21T18:18:11.153 に答える
1

要素をinnerHTMLで変更すると、フォームが送信されるときに、表示されている入力のみが送信されます。

で要素を非表示にすることでdisplay、それらはフォームに存在し続け、送信されます。

于 2012-06-21T18:18:42.897 に答える
0

クラスと ID で div を選択し、オンとオフを切り替えると、より高速になります。ただし、速度の違いに気付かないため、単純なテキストの場合は innerHTML を使用します。異なる div IE を使用する理由がない限り、選択の内容が大幅に異なります。つまり、グラフとテキストとテーブルの場合は、異なる div を作成します。

要するに、どちらも同じことをします。

于 2012-06-21T18:21:29.033 に答える