为什么pre标签后的换行符消失了？答案

【问题标题】：Why does newline after pre tag disappear?为什么pre标签后的换行符消失了？
【发布时间】：2014-05-31 20:08:17
【问题描述】：

为什么紧跟在

 标签后面的新行不会出现在 DOM 中？

<html>
<body>

<div id="mydiv">
hello
div
world
</div>

<pre id="mypre">
hello
pre
world
</pre>

<script>
alert("div content: "+document.getElementById("mydiv").innerHTML)
alert("pre content: "+document.getElementById("mypre").innerHTML)
</script>

</body>
</html>


表明与 div-tag 后的换行符不同，pre-tag 后的换行符似乎不在 dom 中。此外，整个正文的 innerHTML 在 pre-tag 之后不显示换行符。

有没有办法在JS中找出原始HTML文档是否在
之后包含换行符？

【问题讨论】：

出色的工作，包括SSCCE。不错。

标签： javascript html dom

【解决方案1】：

因为那是what the spec says to do：

注意：在 HTML 语法中，紧跟在 pre 元素开始标记之后的前导换行符会被去除。

因此，如果您想要那里的换行符，有点违反直觉，您必须添加一个额外的：Example

<pre id="mypre">

hello
pre
world
</pre>

旁注：我强烈建议始终包含文档类型，即使是在您问题中的简短示例中也是如此。它可以产生影响（尽管我认为在这种情况下不会）。

【讨论】：

谢谢。是的，规范确实是这样说的：“可以在 pre 和 textarea 元素的开始标记之后立即放置一个换行符。如果元素的内容打算以换行符开头，则作者需要包含两个连续的换行符。”而且您对 doctype 的看法是正确的，因为这仅涉及 HTML 序列化，因此在使用 XML 序列化时会保留换行符。

【解决方案2】：

来自specification of <pre>：

注意在 HTML 语法中，紧跟在 pre 元素开始标记之后的前导换行符会被去除。

我认为这样你就不用写了：

<pre>Some text
some more
and more
</pre>

避免在开头出现额外的换行符。你可以写：

<pre>
Some text
some more
and more
</pre>

如果您使用<pre> 排列列，这很有用，因为第一种格式不允许您正确排列第一行。

如果您想在预格式化文本的开头添加一个额外的换行符，请在标记后添加一个空行：

<pre id="mypre">

hello
pre
world
</pre>

【讨论】：