15

document.writeウェブサイトのコンテンツを変更するためにいつ使用すべきか、いつ使用すべきかという一般的なルールはあります.innerHTMLか？

これまでの私のルールは次のとおりです。

1）新しいコンテンツを追加document.writeするときに使用します

2）既存のコンテンツを変更.innerHTMLするときに使用します

しかし、誰かが私に、一方.innerHTMLでは奇妙なMicrosoft標準であると言ったので、私は混乱しましたが、他方ではdocument.write、XHTMLでは許可されていないことを読みました。

JavaScriptでソースコードを操作するには、どの構造を使用する必要がありますか？

4

4 に答える 4

12

innerHTMLまた、document.writeコンテンツの使用法や目的が異なるため、コンテンツを動的に変更/挿入するための実際の比較可能な方法ではありません。

document.write特定のユースケースに関連付ける必要があります。ページが読み込まれ、DOMの準備が整うと、そのメソッドを使用できなくなります。そのため、一般的に、ブロックを含む外部javascriptファイル（javascriptライブラリ）を同期的にロードするために使用できる条件ステートメントで最もよく使用されます<script>（たとえば、のCDNからjQueryをロードする場合HTML5 Boilerplate）。

application/xhtml+xmlこのメソッドとXHTMLについて読んだことは、ページがmimeタイプと一緒に提供されるときに当てはまります。Fromw3.org

document.write（document.writelnなど）はXHTMLドキュメントでは機能しません（エラーコンソールで「操作はサポートされていません」（NS_ERROR_DOM_NOT_SUPPORTED_ERR）エラーが発生します）。これは、拡張子が.xhtmlのローカルファイルを開く場合、またはapplication / xhtml +xmlMIMEタイプで提供されるドキュメントの場合です。

これらのアプローチのもう1つの違いは、挿入ノードに関連しています。メソッドを使用.innerHTMLする場合、コンテンツを追加する場所を選択できますが、document.writeを使用すると、挿入ノードは常にこのメソッドが使用されたドキュメントの一部になります。

于 2012-04-10T08:11:27.223 に答える
12

innerHTML文字列の変更によってDOMの内容を変更するために使用できます。したがって、選択した要素の最後にテキストを含む段落を追加したい場合は、次のようになります。

document.getElementById( 'some-id' ).innerHTML += '<p>here is some text</p>'

できるだけ多くのDOM操作固有のAPI（たとえば、、、など）を使用することをお勧めdocument.createElementしdocument.createDocumentFragmentます<element>.appendChild。しかし、それは私の好みです。

私が適切な使用法を見たのdocument.writeは、HTML5ボイラープレートだけです（jQueryが正しくロードされたかどうかをチェックする方法を見てください）。それ以外は、私はそれから離れていました。

于 2012-04-10T08:11:58.023 に答える
2

1）document.write（）は、コンテンツをユーザーが表示できるブラウザーに直接配置します。

このメソッドは、HTML式またはJavaScriptコードをドキュメントに書き込みます。

次の例では、「HelloWorld」をドキュメントに出力します。

<html>
  <body>
    <script>
    document.write("Hello World!");
    </script>
  </body>
</html>

2）document.innerHTMLは、要素の内部コンテンツを変更します

要素の既存のコンテンツを変更します

以下のコードは、pタグの内容を変更します

<html>
<body>
<p id="test" onclick="myFun()">Click me to change my HTML content or my inner HTML</p>
<script>
function myFun() {
  document.getElementById("test").innerHTML = "I'm replaced by exiesting element";
}
</script>
</body>
</html>

HTMLを接続せずにdocument.write（）を使用することもできますが、変更したいHTMLがすでにある場合は、document.innerHTMLが当然の選択です。

于 2019-03-01T06:33:19.140 に答える
0

上記のコメントに同意します。基本的に：

  • document.writeは、ページの読み込み中に、ブラウザがドキュメントオブジェクトモデルを構築しているときに新しいHTMLタグまたはコンテンツを出力するのに役立ちます。そのコンテンツは、JavaScriptステートメントが埋め込まれている場所に正確に出力されます。
  • .innerHTMLは、新しいHTMLタグ/コンテンツを文字列として挿入するのにいつでも役立ち、JavaScriptが実行されるタイミングや場所に関係なく、DOM内の特定の要素に簡単に転送できます。

いくつかの追加のメモ...

document.writeがbody要素の外部のスクリプトから呼び出された場合、ページの読み込み中に呼び出された場合、その出力はbody要素に追加されます。ただし、ページが読み込まれると、同じdocument.writeによってドキュメントオブジェクトモデル全体が上書きされ、ページが効果的に消去されます。それはすべて、ページの読み込みを伴うdocument.writeのタイミングに依存します。

document.writeを使用してbody要素の最後に新しいコンテンツを追加する場合は、次の方法を使用した方がよい場合があります。

document.body.innerHTML += "A string of new content!";

少し安全です。

于 2021-02-23T12:33:21.123 に答える