為什么 JavaScript 換行符在 HTML 中不起作用？
[英]Why doesn’t JavaScript newlines work inside HTML?
問題描述
我有以下內容：
<html>
<body>
<script type="text/javascript">
document.write('Hello\nWorld')
</script>
</body>
</html>
您可能都知道， \n不起作用，我必須改用<br> 。 如果我鏈接到外部.js文件，它也不會起作用。 這是我的問題：
- 為什么
\n不起作用？ - 為什么
<br>甚至可以工作？ 腳本標簽內的所有內容不應該嚴格為 JavaScript 而不是 HTML 和 JS 之間的骯臟混合嗎？ - 是否有可能使
\n以某種方式工作？ - 我知道
\t也不起作用。 還有其他在 HTML 文件中不起作用的東西嗎？ - 不相關的問題（我不想為此打開一個新問題）：我安裝了 Node.js 以便能夠從 vim 內部試用 JS 腳本但是當我運行這個腳本時我得到錯誤“
document未定義”。 當我從 REPL 嘗試時，同樣的事情發生了。 有任何想法嗎？
在搜索類似問題時，我得到的只是我應該使用<br>而不是\n 。
13 個解決方案
解決方案1
18 2011-04-25 19:52:31
為什么
\\n不起作用？
因為空白只是 HTML 中的空白。
為什么
<br>甚至可以工作？
因為它是換行符的 HTML
腳本標簽內的所有內容不應該是嚴格的 JavaScript 而不是 HTML 和 JS 之間的骯臟混合嗎？
那是主觀的。 許多人也認為document.write很臟。
您始終可以使用createElement和createTextNode
是否有可能以某種方式使
\\n工作？
我知道
\\t也不起作用。 任何其他在 HTML 文件中不起作用的東西？
HTML 不是純文本。 列出所有差異將非常耗時，並且超出 Stack Overflow 的范圍。 嘗試閱讀規范。
不相關的問題（我不想為此打開一個新問題）
它是完全不相關的。 打開一個新問題。
解決方案2
12 2020-07-26 12:44:54
我有：
<div>Hello\nworld</div>
我將下面的 css 添加到div類，現在它正在工作：
div {
white-space: pre-wrap;
}
我希望這也能解決你的問題。
解決方案3
9 已采納 2011-04-25 19:48:22
\\n有效。 如果您有各種調試器（或類似的開發人員工具），您可以查看文檔源，並且您會看到確實有換行符。 問題在於您查看頁面的方式：您不是在閱讀其源代碼，而是將其作為 HTML 文檔閱讀。 HTML 中的空白被折疊成一個空格。 因此，當您更改源時，它確實會發生變化，盡管當解釋為 HTML 文檔時，該更改不會顯示。
您的 Node.js 錯誤很可能是由於您在服務器上運行瀏覽器腳本造成的。 即引用document腳本旨在在瀏覽器中運行，其中有一個 DOM 等。雖然通用節點進程沒有這樣的全局對象，因為它不是瀏覽器。 因此，當您嘗試運行引用名為document的全局對象的代碼時，假設它就像在瀏覽器中一樣存在，它將拋出錯誤。 document.write不存在； 如果您想寫入屏幕，請嘗試使用console.log或查看其他 util 函數。
解決方案4
4 2011-04-25 19:42:30
當 HTML 呈現時，它會忽略空格。 因此，唯一的方法是使用換行符。
使用<br/>而不是\\n它將工作正常
document.write()函數將 HTML 寫入元素。
解決方案5
3 2018-08-18 22:13:39
在 html 上使用<pre></pre> ，它將尊重來自 JS 的文本格式。
解決方案6
2 2011-04-25 19:41:19
當您寫入頁面時，您不是在編寫 JavaScript； 您正在編寫 HTML。 \\n 是一個特殊的“換行”字符，它不會在瀏覽器呈現 HTML 時創建換行符。 它會在 HTML 文件本身中創建一個換行符，但瀏覽器在呈現標記時不會考慮這一點。
因此，需要 br 標簽。
解決方案7
2 2011-04-25 19:41:30
使用 html 標簽<br/>輸入行結尾（您的輸出由 html 解析器解釋），例如：
Javascript：
document.write("Hello<br/>World");
解決方案8
0 2011-04-25 19:42:28
JavaScript 發出的空格與 HTML 文件中的任何其他空格一樣。 這對我來說似乎是預期的行為。
解決方案9
0 2011-04-25 19:44:57
1) \\n在純文本文件中工作。
2) <br />有效，因為您在字符串中執行 HTML。 字符串可以保存字符而不會破壞 JS 腳本的其余部分。
3) 不是真的。 也許當您使用<textarea> 。
4) 大多數其他\\*的
5）需要更多信息。
解決方案10
0 2011-04-25 19:49:53
1,3。 "\\n" 確實有效。 如果您在 body 標簽內執行 document.write，您可以檢查 document.body.innerHTML 並查看是否確實存在換行符。
4.任何特定於 HTML 的內容都將呈現特定於 HTML 的內容，因此您必須將<和>轉義為< 和> 例如。
5. document是一個在瀏覽器中可用的對象，它沒有在 node 中使用，因為那里不存在 DOM。 require("sys"); 並在 nodejs 中使用 sys.print。
解決方案11
0 2011-04-25 19:50:02
document對象代表一個 HTML 文檔； 寫入文檔的任何文本都將由瀏覽器的 HTML 渲染器處理。 在 HTML 中，所有相鄰的空格，包括換行符（例如， "\\n" ），在渲染時都會折疊成一個空格。 這就是為什么你需要<br /> ，它被呈現為一個換行符。 您可以通過用<br />替換它或寫入<pre>元素來使\\n工作：
Hello World
解決方案12
0 2022-09-24 22:16:12
簡短的回答：
如果您查看源代碼，您會發現\n確實有效，但 HTML 會跳過任何空格，而不僅僅是一個。 要獲得新行，您可以使用<pre>或<br />
解決方案13
-1 2011-04-25 19:51:25
其實你的代碼是有效的。 當您在 Firefox 等瀏覽器控制台上運行它時，它會顯示：
<html><head></head><body>
<script type="text/javascript">
document.write('Hello\nWorld')
</script>Hello
World
</body></html>
注意分開的 Hello 和 World。
但是當在 HTML 上顯示時，將省略換行符（空格）。
要“按原樣”顯示，您可以使用 PRE 標記將 javascript 括起來，例如：
<html>
<body>
<pre>
<script type="text/javascript">
document.write('Hello\nWorld')
</script>
</pre>
</body>
</html>
您將在 HTML 上顯示換行符。
解決方案14
-1 2011-04-25 21:16:23
每個人都說過要說的話，但如果您使用的是 firebug/chrome Javascript 控制台 ..然后試試這個 >
console.log("Hello\\nWorld");
這是關鍵的區別。 當您在 HTML 中打印某些內容時，HTML 規則適用。 在其他地方，您可以看到換行符起作用。
為什么此JavaScript代碼（嵌入為HTML屬性）不起作用？
[英]Why doesn't this JavaScript code(embedded as an HTML attribute)work?
為什么我的 script.js 文件不起作用，但 index.html 文件中的 JavaScript 代碼起作用？
[英]Why my script.js file doesn't work but the JavaScript code inside of the index.html file works?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
javascript require不適用於html
為什么$（this）在javascript函數中不起作用？
php javascript html，為什么不行？
為什么此JavaScript代碼（嵌入為HTML屬性）不起作用？
javascript，html5表單。 為什么不起作用？
為什么這個簡單的HTML / JavaScript計算器不起作用？
為什么 html 的 javascript 代碼在 ios 中不起作用？
Javascript在html中不起作用
為什么我的 script.js 文件不起作用，但 index.html 文件中的 JavaScript 代碼起作用？
為什么這個JavaScript無法運作？
相關標簽