javascript - JavaScript による要素の動的追加と CSS による非表示

Question

display:noneページに要素を追加して設定することと、要素を動的に作成して必要な場所に追加する関数を作成することの長所/短所について疑問に思っています。

私の場合、返信したいコメントに添付される返信ボックスを作成しています。Atm CSSで非表示にしてから、onclick関数で必要なノードに移動します。より良い方法はありますか？私はDOMのレンダリング時間などを考慮に入れるのはまったく初めてですが、今からすぐに取得したいと思います.

Answer 1

JavaScript を使用して、クライアント側で要素を動的に生成することをお勧めします..

理由

• あなたのHTMLは少なくなります..
• どこにでも追加できます..
• 要素を非表示/表示するために不要な CSS を使用する必要はありません。

プラス面でさえ、ユーザーのブラウザの JavaScript がオフになっている場合、読み込み時に CSS を使用して要素を非表示にするので、JavaScript を使用することによってこれらの要素がまったく読み込まれないよりも、とにかく大きな問題にはならないということです。

Answer 2

おそらく、この2つの最大の違いは、HTMLに含まれているコンテンツを検索エンジンでクロールできることです。Javascriptを介して追加されたDOM要素は追加されません。

DOMのレンダリング時間に関しては、コードがクリーンで適切に記述されている限り、大きな違いはありません。

CSSを使用した表示と非表示は、JSよりも常に高速になると確信しています。