web-dev-qa-db-ja.com

Javascriptを使用してHTMLを記述する正しい方法は何ですか？

いくつかの投稿では、人々がダイナミックHTMLを書くときにjavascriptでdocument.write()を使用することに眉をひそめていることがわかりました。

どうしてこれなの？そして、正しい方法は何ですか？

javascripthtmldynamic
63
Gary Willoughby

document.write()は、ページが最初に解析され、DOMが作成されている間のみ機能します。ブラウザが終了_</body>_タグに到達し、DOMの準備ができたら、document.write()を使用できなくなります。

document.write()の使用が正しいか間違っているとは言いません。それはあなたの状況次第です。場合によっては、タスクを実行するためにdocument.write()が必要なだけです。 GoogleアナリティクスがほとんどのWebサイトにどのように挿入されるかを見てください。

DOMの準備ができたら、ダイナミックHTMLを挿入する2つの方法があります（新しいHTMLを_<div id="node-id"></div>_に挿入することを想定しています）：

  1. ノードでinnerHTMLを使用する：

    _var node = document.getElementById('node-id');
node.innerHTML('<p>some dynamic html</p>');
_

  2. DOMメソッドの使用：

    _var node = document.getElementById('node-id');
var newNode = document.createElement('p');
newNode.appendChild(document.createTextNode('some dynamic html'));
node.appendChild(newNode);
_

DOM APIメソッドを使用することが純粋な方法かもしれませんが、innerHTMLははるかに高速であることが証明されており、jQueryなどのJavaScriptライブラリで内部で使用されています。

注： _<script>_は、これが機能するために_<body>_タグ内にある必要があります。

45
Ricky

document.write()はXHTMLでは機能しません。実行されますafterページの読み込みが完了し、HTMLの文字列を書き出すだけです。

HTMLの実際のメモリ内表現はDOMであるため、特定のページを更新する最良の方法は、DOMを直接操作することです。

これを行う方法は、プログラムでノードを作成し、DOM内の既存の場所にノードをアタッチすることです。 [考案の目的]の例では、「ヘッダー」のdiv属性を保持するID要素を持っていると仮定すると、これを行うことで動的テキストを導入できます。

// create my text
var sHeader = document.createTextNode('Hello world!');

// create an element for the text and append it
var spanHeader = document.createElement('span');
spanHeader.appendChild(sHeader);

// grab a reference to the div header
var divHeader = document.getElementById('header');

// append the new element to the header
divHeader.appendChild(spanHeader);
27
Tom

この場合、jQueryを使用することをお勧めします。便利な機能を提供し、次のようなことができます。

$('div').html('<b>Test</b>');

詳細については、 http://docs.jquery.com/Attributes/html#val をご覧ください。

10
Nyla Pareska

  1. Tomが概説したDOMメソッド。

  2. innerHTML。iHungerが言及しています。

DOMメソッドは、属性とコンテンツを設定する文字列よりも非常に望ましい方法です。 _innerHTML= '<a href="'+path+'">'+text+'</a>'_と書いていることに気付いたら、実際にはクライアント側で新しいクロスサイトスクリプティングセキュリティホールを作成していることになります。

DOMメソッドは、従来、innerHTMLと比較して「遅い」と説明されています。しかし、これは実際にはすべてではありません。遅いのは、たくさんの子ノードを挿入することです：

_ for (var i= 0; i<1000; i++)
     div.parentNode.insertBefore(document.createElement('div'), div);
_

これは、DOMが要素を挿入するためにノードリストで適切な場所を見つけ、他の子ノードを上に移動し、新しいノードを挿入し、ポインターを更新するなどの作業負荷に変換されます。

一方、既存の属性の値、またはテキストノードのデータの設定は非常に高速です。文字列ポインタを変更するだけです。これは、親をinnerHTMLでシリアル化、変更、および解析するよりもはるかに高速になります（イベントハンドラー、JS参照、フォーム値などの非シリアル化可能なデータは失われません）。

ChildNodesをそれほど遅くせずにDOM操作を行う技術があります。特に、cloneNodeの可能性に注意し、DocumentFragmentを使用します。ただし、innerHTMLの方が実際に速い場合があります。 innerHTMLを使用して属性値とテキストコンテンツのプレースホルダーを使用して基本構造を記述し、その後DOMを使用して入力することで、両方の世界の利点を活用できます。これにより、上記のエスケープ/セキュリティの問題を回避するために、独自のescapehtml()関数を記述する必要がなくなります。

9
bobince

代わりに、ページ上の要素のinnerHTMLまたはouterHTMLを変更できます。

3
iHunger

JavaScriptやそのベストプラクティスは特に得意ではありませんが、document.write()をinnerHtml()と一緒に使用すると、基本的にmayまたはnot有効なHTML;それはただのキャラクターです。 DOMを使用することにより、適切で標準に準拠したHTMLを確保し、明らかに不正なHTMLを介してページが壊れないようにします。

そして、トムが述べたように、JavaScriptはページがロードされた後に行われます。ページの初期設定を標準のHTML（.htmlファイルまたはサーバーが実行する[php]など）で行うことをお勧めします。

2
RoyalKnight

確かに最善の方法は、JavaScriptで重いHTML creationを行わないようにすることですか？サーバーから送信されるマークアップには、その大部分が含まれている必要があります。可能な場合は、要素をブルートフォースで削除/置換するのではなく、CSSを使用して操作できます。

これは、ウィジェットシステムをエミュレートするような「賢い」ことをしている場合には当てはまりません。

1
Rob

_element.InnerHtml= allmycontent_：要素内のすべてを書き換えます。この要素内に必要なコンテンツ全体を保存するには、変数_let allmycontent="this is what I want to print inside this element"_を使用する必要があります。この関数を呼び出すたびに実行しない場合、要素のコンテンツは消去され、最後に呼び出した要素で置き換えられます。

document.write()：は、ページ上の呼び出しが行われる場所でコンテンツが印刷されるたびに、複数回使用できます。

ただし、注意してください：document.write（）メソッドはonlyページ作成時にコンテンツを挿入するのに便利です。そのため、製品または画像のカタログのように書き込むデータが大量にある場合は、繰り返し使用しないでください。

ここに簡単な例：脇のメニューのすべてのliは配列「タブ」に保存され、scriptタグでjsスクリプトを直接HTMLページに作成し、writeを使用できますそれらのliをページに挿入する反復関数のメソッド。

_<script type="text/javascript">
document.write("<ul>");
for (var i=0; i<=tab.length; i++){
    document.write(tab[i]);
    }document.write("</ul>");
</script>`
_

これは、ロード中にJsが線形的に解釈されるであるため機能します。したがって、スクリプトがhtmlページの適切な場所にあることを確認してください。外部Jsファイルを使用することもできますが、その場合もスクリプトを解釈したい場所で宣言する必要があります。

このため、"user Interaction"（クリックまたはホバーなど）の結果としてdocument.writeを呼び出してページに何かを書き込むことはできません。上記のように、書き込みメソッドが作成され、新しいページが書き込まれます（実際の実行スタックをパージし、新しいスタックと新しいDOMツリーを開始します）。この場合、次を使用します。

_element.innerHTML=("Myfullcontent");
_

ドキュメントのメソッドの詳細：コンソールを開きます：_document;_次に開く：___proto__: HTMLDocumentPrototype_

ドキュメントオブジェクトに関数プロパティ「write」が表示されます。 document.writelnを使用して、各ステートメントに新しい行を追加することもできます。関数/メソッドの詳細については、括弧なしでその名前をコンソールに書き込むだけです：_document.write;_コンソールは、呼び出す代わりに説明を返します。

1
Myriam Rouve

JavaScriptを使用してhtmlを作成する方法は多数あります。

document.writeは、実際にロードする前にページに書き込む場合にのみ役立ちます。ページが（onloadイベントで）ロードされた後にdocument.write（）を使用すると、新しいページが作成され、古いコンテンツが上書きされます。また、XHTMLを含むXMLでは機能しません。

一方、他のメソッドはDOMを直接操作するため、DOMが作成される（ページがロードされる）前に使用することはできません。

これらの方法は次のとおりです。

  • node.innerHTML = "Whatever";
  • document.createElement（ 'div'）;およびnode.appendChild（）など。

ほとんどの場合、node.innerHTMLはDOM関数よりも高速であるため、より優れています。また、ほとんどの場合、コードが読みやすく、小さくなります。

1
Maiku Mori

Jqueryを使用して、それがどれほど簡単か見てみましょう。

    var a = '<h1> this is some html </h1>';
    $("#results").html(a);

       //html
    <div id="results"> </div>
0
csandreas1

Document.writeメソッドは非常に制限されています。ページの読み込みが完了する前にのみ使用できます。ロードされたページのコンテンツを更新するために使用することはできません。

おそらく必要なのは innerHTML です。

0
Mike Daniels

document.write、document.createElement、.createTextNode、.appendChildなどのDOM JavaScript APIの代わりに使用する必要があると思います。安全でほぼクロスブラウザ。

ihunger'souterHTMLはクロスブラウザではなく、IEのみ。

0
Luca