ユーザーが以前に選択した内容に応じて、さまざまな入力を表示する Web フォームを開発しています。だから私は、空のdivを持ち、innerHTMLで内容を変更することと、いくつかのdiv要素を持ち、表示をnoneに設定し、ユーザー入力に応じて表示するものを変更することの違いは何だろうと思っていました。
ありがとう!
ユーザーが以前に選択した内容に応じて、さまざまな入力を表示する Web フォームを開発しています。だから私は、空のdivを持ち、innerHTMLで内容を変更することと、いくつかのdiv要素を持ち、表示をnoneに設定し、ユーザー入力に応じて表示するものを変更することの違いは何だろうと思っていました。
ありがとう!
一般に、createElement や appendChild などの JavaScript コマンドを使用する代わりに、できるだけ innerHTML に触れないようにする必要があります。
多くの innerHTML 操作は、javascript のアンチパターンと見なされます。
とはいえ、フォームが 1 つまたは 2 ~ 3 つある場合は、自分に合った方法で作業を進めてください。理解しやすく、保守しやすいコードと見なされるものを意味します。
これらの規模では、どちらのアプローチを使用してもパフォーマンスの向上/低下に気付く人はいないでしょう。個人的には、おそらく表示をなしに設定します。
ほとんどの場合、要素を作成してから破棄するよりも、必要に応じて要素を表示および非表示にする方がはるかに効率的です。
これは主に、ノードをドキュメントに追加する操作innerHTML
が高度に最適化されていても、計算コストがかかるためです。第二に、要素を破棄すると、それらの要素に格納されているすべてのイベント ハンドラーを破棄することにもなるため、それらを再バインドする必要があり、当然時間と不要なコードが必要になります。
もう 1 つの利点は、ユーザーが Javascript を無効にした場合、またはスクリーン リーダーなど、Javascript をサポートしていないブラウザーを使用している場合、Javascript が機能しないことです。すべての要素が元の HTML に存在する場合、そのページはこれらのユーザーにとって少なくともある程度意味のあるものになります。
div の準備ができている場合は、表示を変更するだけです。
これは、たとえばタブを扱う場合の標準的なソリューションです。
要素をinnerHTML
で変更すると、フォームが送信されるときに、表示されている入力のみが送信されます。
で要素を非表示にすることでdisplay
、それらはフォームに存在し続け、送信されます。
クラスと ID で div を選択し、オンとオフを切り替えると、より高速になります。ただし、速度の違いに気付かないため、単純なテキストの場合は innerHTML を使用します。異なる div IE を使用する理由がない限り、選択の内容が大幅に異なります。つまり、グラフとテキストとテーブルの場合は、異なる div を作成します。
要するに、どちらも同じことをします。