問題タブ [createelement]

次のような関数内に要素を作成する場合:

また、DOM のどこにも追加しません。つまり、.appendChild 関数を介して追加しません。メモリ内に残りますか? だからあなたはしなければならないでしょうか

私はただ興味があります:)

HTMLコードをDOMに追加する方法は2つありますが、それを行うための最良の方法がわかりません。

最初の方法

最初の方法は簡単な方法です。HTMLコードを（jQueryを使用して）追加するだけで、次のようになります$('[code here]').appendTo(element);。element.innerHTML = [code here];

2番目の方法

もう1つの方法は、次のようにすべての要素を1つずつ作成することです。

document.createElementこのメソッドは、やのようなコア関数を使用しますelement.setAttribute。

最初の方法と2番目の方法をいつ使用する必要がありますか？方法2は方法1よりも高速ですか？

編集-速度テストの結果

コードが続く3つの速度テストを実行しました。

これは次の本当に驚くべき結果をもたらしました

全体として、innerHTMLメソッドは最速のようであり、多くの場合、最も読みやすいメソッドです。

HTML 要素を追加せずにこの HTML コードを IE6 または 7 (または 8) に最適化する方法、または IE がすべての HTML5 要素をスキップする方法を知っていますか?

CSS で要素をフォーマットしたいだけの場合 - 他の機能を使いたくない - document.createElement("nav") DOM 要素は IE を詐欺してプレーンな HTML ドキュメントを作成するのに十分ですか?

ありがとうございました。

html5 を有効にするスクリプトを使用した IE6、IE7、および IE8 の DOM create 要素の詳細については、こちら» を参照してください。

わかりました、私はこれで頭を壁にぶつけてきましたが、要素を作成していない理由がわかりません。たぶん、私がここで見落としていた非常に小さな何か。基本的に、この Javascript コードが出力される PHP ドキュメントにあり、ページが読み込まれる途中のように、残念ながらヘッダーに入ることができません。とにかくそれが問題なのかどうかはわかりませんが、おそらくそれは...うーん。

また、これらの関数内でリンクしている他の関数も問題なく動作すると確信しています。ここでの問題は、この関数内で div がまったく作成されず、その理由が理解できないことです。さらに、Firefox、FireBug は、関数内でこれを処理しようとしたにもかかわらず、変数 divName が未定義であることを通知していますが、その理由は不明です。

とにかく、作成した div 要素を次の HTML の直前に挿入する必要があります。

この関数は複数回呼び出される可能性があるため、id 値を重複させたくないため、ここでは id の代わりに name を使用しています。たとえば、同じページに 3 つのシャウトボックスがある場合 (理由は聞かないでください... 笑)、既に "dp_Reserved_Counted" に変更した他の名前をスキップする必要があります。これは正しく行っていると思います。いずれにせよ、これをヘッダーに配置して一度だけ呼び出すことができれば可能ですが、これらはロードされており、それらがどれであるかを知る方法がないため、これは不可能です。そのため、実際のシャウトボックスが HTML 内のページに出力されます。基本的に、それが問題かどうかはわかりませんが、問題が上記のコード内にない限り、何らかの回避策があるはずです... arrg

私を助けてください。本当に私が必要としているのは、これに対する第 2 の目です。ありがとう ：）

実際には、innerHTMLよりもcreateElementを使用する利点は何ですか？パフォーマンスとコードの可読性/保守性の点でinnerHTMLを使用する方が効率的であると確信しているので、質問していますが、チームメートはコーディングアプローチとしてcreateElementを使用することに決めました。createElementをより効率的にする方法を理解したいだけです。

2 つの質問があります。

まず、シナリオ:

NOSCRIPT のモバイル ブラウザ サポートに関していくつかの奇妙な問題が発生したため、JS を「検出」するための代替ソリューションを考案する必要があります。ソリューション ロジックは、ページに 2 つの DIV を配置することです。1 つは、JS がなく、デフォルトで表示されていることを示すエラーです。JS がある場合は、前の CSS をオーバーライドしてエラーを非表示にし、代わりにコンテンツを表示する新しい STYLE ブロックを HEAD に追加します。

サンプル HTML:

これは私が始めたJSです：

しかし、私は問題を抱えていました。DOM に配置する前に、作成された要素に innerHTML を挿入しようとすると、IE で発生する可能性のあるセキュリティ上の問題について、いくつかのグーグル検索が行われました。

http://karma.nucleuscms.org/item/101

そのため、スクリプトを次のように変更しました。

質問 1 : IE の問題に対する有効な回避策ですか? より効率的な解決策はありますか？

質問 2 : 調整を行ってもスクリプトが IE で動作しません。Firefox では正常に動作しますが、IE 7 では「不明なランタイム エラー」が発生します。

このコードのサンプルが JSBIN にあります。

http://jsbin.com/ucesi4/4

IEで何が起こっているか知っている人はいますか？

アップデート：

私はグーグル経由でこのリンクに出くわしました。最後のコメントに注意してください。

http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx

とはいえ、XHTML に厳密に準拠するには、すべてのスタイル ルールを HEAD に配置する必要があります。innerHTML を使用して HEAD 要素または STYLE 要素に直接挿入することはできないため、これを行うのも少し難しい場合があります。(これらのタグは両方とも読み取り専用です。)

えっ！真実？FireFox は寛容すぎるだけですか? それとも、これは非常に奇妙な IE の癖ですか?

更新 2:

ここで解決しようとしていることについて、もう少し背景を説明します。私たちはモバイル デバイスを扱っていますが、一部の時代遅れのデバイスは、a) NOSCRIPT をサポートしておらず、b) 遅い JS エンジンを使用しています。

それらは NOSCRIPT をサポートしていないため、デフォルトでエラーを表示し、JS がある場合はエラーを非表示にし、適切なコンテンツを表示します。これらの JS エンジンが遅いため、DIV の表示/非表示の「ちらつき」が見られます。これは、DIV がレンダリングされる前に CSS をロードするため、これを処理するために提案されたソリューションでした。

無効に見えるため、解決策は、これらの古いデバイスでこのメソッドを使用することです (IE でなくても機能するように見えるため)。その後、他のすべての適切なブラウザーは提案どおりに動作します...各 DIV が DOM にロードされた後、インライン JS を介して DISPLAY CSS プロパティを更新するだけです。

とはいえ、この問題が IE のバグなのか、それとも STYLE を読み取り専用要素にすることで IE が実際に適切な標準に準拠しているのかについて、私はまだ興味があります。

コードで appendChild() と createElement() を使用すると、定義された CSS ID の後続のスタイルが適用されません。誰かが理由を教えてもらえますか? これが私のコードです：

次に、APIを介してBingへの検索クエリを処理する他のコードがあります（Googleが現在課金しているためだけです...）

次に、同じメソッドを使用して別の div を挿入します。

ここで、これらの数値にいくつかのスタイルを適用したいと思います。ただし、searchResultsPage にスタイルを適用すると、次のようになります。

継承されているスタイルがわかりません。興味深いのは、これら 2 つの要素の 1 つだけを挿入すると、すべてが計画どおりに進み、スタイルがうまく表示されることです。問題は、検索の上部と下部にページを表示したいということです。

なぜこれが起こっているのですか？要素が2回使用されていることに関係があるのではないかと思いますが、オブジェクトが異なる場合にこれが影響する理由はわかりません。

ありがとう。

達成したいことには、またはと文字列のいずれcreateElement()かを使用できinnerHTMLます。

最終的に本当に速いのはどれですか？私は長い間、文字列は同じ結果を返す組み込み関数よりもはるかに遅いと信じるようになりましたが、それは本当に本当ですか？

試してみましcreateElement()たが、各要素に追加する必要のあるすべてのプロパティの速度が低下しているようです。それだけでなく、より多くのスペースを必要とします。配列の長さに基づいて1から無限大までのループがありますが、速度が低下する兆候を示す前に、最大50個程度の要素を追加することが望ましいです。これらの50ほどの要素の中に、私が作成したい要素はさらに約10個あります。つまり、実際には約500個の要素が作成されています。

組み込み関数を使用して要素を作成することで、通常よりも少し遅くなることに気付きました。その配列をリセットすることに騙されたため（配列は5Dであり、同じスクリプトに設定されていませんでした）、どちらを知りたいですか。すべてを実行する前に、速度と単純に優れたプラクティスの両方に関して、本当に優れています。

テーブル幅のjavascriptとcreateElement()を作成しようとしています。私の問題は、背景画像が設定されていないことです（ただの白）。ただし、のinnerHTMLを同じパスのイメージタグに設定すると、機能します!

また、テーブル内の各行の間にスペースがあるという別の問題もあります。追加するDOM要素は次のとおりです。

そして、CSS

これらの問題は、Chrome と FF @ ubuntu 11.04 の両方で発生します。javascript コンソールにエラーは表示されません。

• ジャック

どうすればこれを機能させることができますか？次のようなphpファイルをロードしたい：

• ボタンをクリックします。
• Javascript 関数を呼び出します。
• Javascript 関数で、src file.php を使用して img を作成します。

これにより、php が強制的に読み込まれます。これがコードです。

次に、savepages.php で別のアラートを実行して、php が呼び出され、呼び出されていないことを確認します。これがsavepages.phpです。

PHPからのアラートは発生しません。PHPのロードを強制する別の要素タイプはありますか? ajax をインストールしていないので、このような回避策が必要です。

ありがとう。