3

おそらく問題ではないため、答えが見つからなかった非常に単純な質問ですが、Javascriptを使用してHTMLオブジェクトを作成することと、文字列を使用して要素を作成することに違いがあるかどうか疑問に思っています。同様に、JS の HTML 要素を JS オブジェクトまたは文字列として宣言し、ブラウザ/ライブラリ/etc に解析させる方が良い方法ですか? 例えば：

jQuery('<div />', {'class': 'example'});

対

jQuery('<div class="example></div>');

（例としてjQueryを使用していますが、バニラJSにも同じ質問が当てはまります。）

私には問題ではないように思えますが、私は JS の専門家ではないので、正しく実行していることを確認したいと考えています。前もって感謝します！

4

3 に答える 3

3

どちらも「正しい」です。そしてどちらも、さまざまな目的でさまざまな時期に役立ちます。

たとえば、ページ速度に関しては、最近では次のようなことを行う方が高速です。

document.body.innerHTML = "<header>....big string o' html text</footer>";

ブラウザはそれを瞬時に吐き出します。

安全のために、ユーザー入力を扱うときは、要素を作成し、それらを にアタッチしてからdocumentFragmentDOM に追加する (または DOM ノードを新しいバージョンなどに置き換える) 方が安全です。

検討：

var userPost = "My name is Bob.<script src=\"//bad-place.com/awful-things.js\"></script>",
    paragraph = "<p>" + userPost + "</p>";

commentList.innerHTML += paragraph;

対：

var userPost = "My name is Bob.<script src=\"//bad-place.com/awful-things.js\"></script>",
    paragraph = document.createElement("p");

    paragraph.appendChild( document.createTextNode(userPost) );
    commentList.appendChild(paragraph);

悪いことをする人もいれば、しない人もいます。

もちろん、 を作成する必要はありません。ortextNodesを使用できます(ブラウザは独自にテキスト ノードを作成します)。innerTexttextContent

ただし、何をどのように共有するかを常に検討することが重要です。

信頼できる場所以外の場所から送信されている場合 (静的ページを提供していない限り、どこにもいないはずです。その場合、なぜ html を構築しているのでしょうか?)、インジェクションを念頭に置いておく必要があります。あなたは注射されたいです。

于 2012-08-02T17:27:46.533 に答える
2

@camus が言ったように、すべてがハードコーディングされている場合は、オプション 2 がおそらく優れています。

ただし、最初のオプションの1つの制限は、これが

$("<div data-foo='X' />", { 'class': 'example' });

動作しません。そのオーバーロードは、属性をまったく持たない最初のパラメーターとしてネイキッド タグを想定しています。

ここで報告した

于 2012-08-02T17:23:00.600 に答える
0

$ 関数を呼び出す前に設定された変数に属性が依存している場合は、1/ の方が優れています。文字列と変数を連結する必要はありません。その事実は別として、両方を行うことができ、それは他の誰かが書いた単なるjsコードであり、ブラウザにハードコードされたC++ DOM APIではありません...

于 2012-08-02T17:22:39.167 に答える