document.writeとwritelnの出力内容の違いを解説_基礎知識

document.write() //コンテンツをドキュメントに書き込み、現在の編集位置は書き込まれたコンテンツの最後の文字です
document.writeln() //コンテンツをドキュメントに書き込み、改行文字を追加します現在の編集位置 書き込まれた内容の次の行

document.write() と document.writeln はどちらもクライアントに書き込むための JavaScript メソッドです。 writeln は行形式で出力されますが、実際の内容は参照しません。ページの改行の影響で、pre 要素または xmp 要素に出力されない限り、2 つのメソッドの違いはソース コードを表示するときにのみ確認できます。

テストしてください:

[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]

Run上記のコードは、新しく開いたウィンドウ: [表示] - [ソース ファイル] で、writeln が

を行形式で出力していることがわかります。実際の効果の違いは、ソース コード内の改行によって、実際の効果の「スペース」については、次の例を比較して理解してください:

[Ctrl A すべて選択 注:

外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

実際の入力結果は次のとおりです: 111 222 したがって、アプリケーションでは、write を使用する方が writeln よりも便利であり、不要なスペース効果を生成しないため、私の Html と Js のオンライン相互変換ガジェット [
http: //www .jb51.net/tools/html-js.htm
] インターネット上でほとんどの人が writeln を使用して書く方法を特別に変更しました。これは誰にとっても便利になると信じています。

形式の保持については、テストします:

[Ctrl A すべて選択 注:
外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

document.write() と document.writeln() の違い js を使用して動的選択を記述します


解決策:

どちらも、JavaScript 出力のメソッドです。比較すると、書き込みの違いは ln--line の省略形です。つまり、writeln メソッドは行単位で出力します。これは、?winte? の出力の後に改行文字を追加するのと同じです。

注: document.write メソッドは 2 つの方法で使用できます。1 つはリアルタイム スクリプトを使用して Web ページの読み込み中に Web ページ コンテンツを作成する方法、もう 1 つは遅延スクリプトを使用してこのウィンドウまたは新しいウィンドウのコンテンツを作成する方法です。このメソッドには、ウィンドウまたはフレームに書き込まれる HTML コンテンツである文字列パラメータが必要です。文字列パラメータには、値が文字列である

タグが含まれることがよくあります。その後、ブラウザの出力ストリームが自動的に閉じられ、現在の Web ページの document.write() メソッドによって新しい出力ストリームが開き、現在の Web ページの出力コンテンツがクリアされます。 (ソースドキュメントの変更を含む)。したがって、現在の Web ページをスクリプトによって生成された HTML コンテンツに置き換える場合は、HTML コンテンツを連結して変数に割り当てる必要があります。 document.write() を使用して書き込み操作を完了します。ドキュメントをクリアして新しいデータ フローを開く必要はありません。

document.write() の呼び出しは問題ありません。メソッドについては、その関連メソッド document.close() についても説明する必要があります。スクリプトはウィンドウ (このウィンドウであっても他のウィンドウであっても) に書き込みます。最後の document.write( の後に出力ストリームを閉じる必要があります。 ) メソッドが存在することを確認する必要があります。これを行わないと、後の document.write() メソッドはコンテンツを追加するだけになります。 Web ページは削除されますが、既存のコンテンツは消去されず、新しい値が書き込まれません。

具体的な手順:

1. 空白のウィンドウを開きます。
window.open()

2. write メソッドを使用して、空のウィンドウにコードを書き込みます。

document.write("Line1")
document.write("Line1")

3. writeln メソッドを使用して、空白のウィンドウにコードを書き込みます。

document.writeln("Line1")
document.writeln("Line2")

4.完全なコード例: コードをコピー

<script> with(window.open()){ document.write("百度") document.write("百度") document.writeln("知道") document.writeln("知道") document.writeln("知道") } </script><script> document.writeln("111") document.writeln("222") </script> コードは次のとおりです:<script> document.write("<pre class="brush:php;toolbar:false">百度&quot;) document.write(&quot;百度&quot;) document.writeln(&quot;知道&quot;) document.writeln(&quot;知道&quot;) document.writeln(&quot;知道&quot;) &lt;/script&gt;&lt;div class=&quot;codebody&quot; id=&quot;code97054&quot;&gt; &lt;br&gt;&lt;script&gt; &lt;br&gt;with(window.open()){ &lt;br&gt;document.write(&quot;Line1&quot;) &lt;br&gt;document.write(&quot;Line1&quot;) &lt;br&gt;document.writeln (&quot;Line1&quot;) &lt;br&gt;document.writeln(&quot;Line2&quot;) &lt;br&gt;} &lt;br&gt;&lt;/script&gt; &lt;br&gt; &lt;/div&gt; &lt;br&gt;&lt;br&gt; 注: どちらのメソッドも、ソースコードを見ると違いがわかります。 &lt;br&gt;特別なヒント: 上記のコードを Web ページに追加し、ポップアップ ウィンドウのソース コードを表示すると、次のようになります。 &lt;br&gt;&lt;br&gt;Line1Line1Line1 &lt;br&gt;Line2 &lt;br&gt;&lt;br&gt;ページ効果とソースコードは次の図のとおりです。 &lt;br&gt;&lt;br&gt;&lt;img src=&quot;/static/imghw/default1.png&quot; data-src=&quot;http://files.jb51.net/file_images/article/201402/20140221170111.jpg&quot; class=&quot;lazy&quot; alt=&quot;document.writeとwritelnの出力内容の違いを解説_基礎知識&quot; &gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;特記事項&lt;br&gt;&lt;br&gt;一般に、ページ上の 2 つのメソッドの出力効果に違いはありません (出力されない限り) pre 要素または xmp 要素に追加します)。 &lt;br&gt;&lt;br&gt;&lt;strong&gt;2. document.write() は指定された場所に HTML を書き込みます &lt;br&gt;&lt;/strong&gt;&lt;br&gt;ページが初期化されると、選択ボックスに正しく書き込むことができます &lt;br&gt;それが呼び出されるとき、それはコントロールに書き込まれます。 また、document.write()は、innerHTMLまたはouterHTMLを変更してHTMLを動的に記述することができるのでしょうか。また、表示用に書かれたHTMLをどのように処理するのでしょうか? &lt;br&gt;&lt;br&gt; は次のとおりです: &lt;br&gt;&lt;br&gt;&lt;div class=&quot;codetitle&quot;&gt; &lt;span&gt;&lt;a style=&quot;CURSOR: pointer&quot; data=&quot;78491&quot; class=&quot;copybut&quot; id=&quot;copybut78491&quot; onclick=&quot;doCopy('code78491')&quot;&gt;&lt;u&gt;コードをコピー &lt;/u&gt;&lt;/a&gt;&lt;/span&gt; コードは次のとおりです: &lt;/div&gt; &lt;div class=&quot;codebody&quot; id=&quot;code78491&quot;&gt; &lt;br&gt;&lt;html&gt; &lt;br&gt;&lt;head&gt;&lt;/head&gt; &lt;br&gt;&lt;script type=&quot;text/javascript&quot;&gt; &lt;br&gt;for(i= 0;idocument.write(&quot;&lt;option value='&quot; i &quot;'&gt;&quot; i &quot;&lt;/option&gt;&quot;); &lt;BR&gt;} &lt;BR&gt;function openWrite() { &lt;BR&gt;var win=window.open(); &lt;BR&gt;win.document.write(&quot;Line1&quot;); &lt;BR&gt;win.document.write( &quot;&lt;input type ='text' value='1234567890' /&gt;&quot;); &lt;br&gt;win.document.writeln(&quot;Line1&quot;); &lt;br&gt;win.document.writeln(&quot;Line2&quot;); &gt;} &lt;br&gt; &lt;/script&gt; &lt;br&gt;&lt;body&gt; &lt;br&gt;&lt;script language=&quot;javascript&quot;&gt; &gt;creatOption(); &lt;br&gt;&lt;/script&gt; &lt;br&gt;&lt;input type=&quot;button&quot; value=&quot;Button&quot; onclick=&quot;openWrite()&quot;/&gt; &lt;/body&gt; &lt;br&gt;&lt;/html&gt; &lt;br&gt;&lt;br&gt; &lt;br&gt;&lt;br&gt; 形式の保持については、次のようにテストします: &lt;script&gt; pre で行を折り返す!&quot;) document.write(&quot;pre で行を折り返さない!&quot;)document.writeln(&quot;pre で行を折り返す!&quot;)document.writeln(&quot;pre で行を折り返す!&quot;) document.writeln(&quot;pre で行を折り返します。pre で改行が発生します!</pre>") </script>