将换行符插入前置标记（IE、Javascript）

Question

在 IE 中，当我将文本插入

 标记时，换行符将被忽略：

<pre id="putItHere"></pre>

<script>
function putText() {
   document.getElementById("putItHere").innerHTML = "first line\nsecond line";
}
</script>

使用 \r\n 而不是普通的 \n不起作用。


确实有效，但在 FF 中插入了一个额外的空行，这对于我的目的来说是不可接受的。

Answer 1

这些quirksmode.org 错误报告和评论有关 Internet 的innerHTML 行为Explorer 可以提供帮助：

“IE 将 HTML 规范化应用于分配给 innerHTML 属性的数据。这会导致应保留格式的元素中的空白显示不正确，例如

和<文本区域>。”

Answer 2

这在 IE 中有效吗？

document.getElementById("putItHere")
    .appendChild(document.createTextNode("first line\nsecond line"));

我用 Firefox 测试了它，它可以工作。 :-)

Answer 3

解决方法可以在已接受答案中链接的页面中找到。 为了方便使用，这里是：

if (elem.tagName == "PRE" && "outerHTML" in elem)
{
    elem.outerHTML = "<PRE>" + str + "</PRE>";
}
else
{
    elem.innerHTML = str;
}

Answer 4


在所有浏览器中应该只输出一行。 当然也删除\n，代码应该是：

document.getElementById("putItHere").innerHTML = "first line<br/>second line";

Answer 5

 标记内的内容不应被视为 HTML。

事实上，

 标记的目的是显示格式化文本。

使用innerText 属性是修改

 标记内容的正确方法。

document.getElementById("putItHere").innerText = "first line\nsecond line";

Answer 6

IE9 不标准化白色空间，与它的前身不同。

您应该测试支持而不是针对任何特定浏览器。 例如..

var t = document.createElement(elem.tagName);
t.innerHTML = "\n";

if( t.innerHTML === "\n" ){
    elem.innerHTML = str;
}
else if("outerHTML" in elem)
{
    elem.outerHTML = "<"+elem.tagName+">" + str + "</"+elem.tagName+">";
}
else {
    // fallback of your choice, probably do the first one.
}

Answer 7

我估计这个

我发现 IE 正在使用 \r\n 而 Fx（其他）正在使用 \n

var newline;
if ( document.all ) newline = '\r\n';
else newline = '\n';

var data = 'firstline' + newline + 'second line';
document.getElementById("putItHere").appendChild(document.createTextNode(data));

对于我曾经制作的 TinyMCE（wysiwyg 编辑器）插件，我最终使用 BR i 编辑模式
并在提交等时清理它。

此代码循环遍历 PRE 元素内的所有 BR 元素，并用换行符替换 BR。

请注意，该代码依赖于 TinyMCE API，但可以使用标准 Javascript 轻松编写。

清理：

        var br = ed.dom.select('pre br');
        for (var i = 0; i < br.length; i++) {
          var nlChar;
          if (tinymce.isIE)
            nlChar = '\r\n';
          else
            nlChar = '\n';

          var nl = ed.getDoc().createTextNode(nlChar);
          ed.dom.insertAfter(nl, br[i]);
          ed.dom.remove(br[i]);
        }

祝你好运！

Answer 8

如果您不想使用outerHTML，如果附加的 pre 标记不是问题，您还可以对 IE 执行以下操作：

 if(isIE)
     document.getElementById("putItHere").innerHTML = "<pre>" + content+"</pre>";
 else
     document.getElementById("putItHere").innerHTML = content;

Answer 9

我发现 innerHTML 在应用于元素之前已被处理，因此
成为换行符并删除多个空格。

要保留原始文本，您必须使用 nodeValue，例如；

document.getElementById('pre_id').firstChild.nodeValue='    white space \r\n ad new line';

Answer 10

这是对爱德华·王尔德的答案的一个非常小的调整，保留了

 上的属性。  标签。

if (elem.tagName == "PRE" && "outerHTML" in elem) {
    var outer = elem.outerHTML;
    elem.outerHTML = outer.substring(0, outer.indexOf('>') + 1) + str + "</PRE>";
}
else {
    elem.innerHTML = str;
}

Answer 11

if (typeof div2.innerText == 'undefined')
    div2.innerHTML = value;
else
    div2.innerText = value;

这对我有用。