在IE中,当我将文本插入<pre>
标记时,新行会被忽略:
<pre id="putItHere"></pre>
<script>
function putText() {
document.getElementById("putItHere").innerHTML = "first line\nsecond line";
}
</script>
使用\r\n
代替普通\n
不起作用。
<br/>
确实有效但在FF中插入了一个额外的空白行,这对我来说是不可接受的。
答案 0 :(得分:12)
关于Internet Explorer的innerHTML行为的这些quirksmode.org bug report and comments可能有所帮助:
“ IE将 HTML规范化应用于分配给innerHTML属性的数据。这会导致在应该保留格式的元素中显示空格的错误,例如&lt; pre&gt;和&LT; TextArea&GT; “
答案 1 :(得分:5)
这在IE中有效吗?
document.getElementById("putItHere")
.appendChild(document.createTextNode("first line\nsecond line"));
我用Firefox测试过它的确有效。 : - )
答案 2 :(得分:5)
可以在已接受答案中链接到的页面中找到解决方法。为了便于使用,它是:
if (elem.tagName == "PRE" && "outerHTML" in elem)
{
elem.outerHTML = "<PRE>" + str + "</PRE>";
}
else
{
elem.innerHTML = str;
}
答案 3 :(得分:4)
<br/>
只在所有浏览器中输出一行。当然要删除\ n,代码应该是:
document.getElementById("putItHere").innerHTML = "first line<br/>second line";
答案 4 :(得分:2)
<pre>
标记内的内容不应被视为HTML。
事实上,<pre>
标记的重点是显示格式化文本。
使用innerText属性是修改<pre>
标记内容的正确方法。
document.getElementById("putItHere").innerText = "first line\nsecond line";
答案 5 :(得分:2)
我估计这个。
我发现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]);
}
祝你好运!
答案 6 :(得分:2)
IE9 does not normalize white spaces,与其前辈不同。
您应该测试支持,而不是针对任何特定的浏览器。 E.g ...
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.
}
答案 7 :(得分:1)
如果您不想使用outerHTML,如果其他预标记不是问题,您也可以对IE执行以下操作:
if(isIE)
document.getElementById("putItHere").innerHTML = "<pre>" + content+"</pre>";
else
document.getElementById("putItHere").innerHTML = content;
答案 8 :(得分:1)
这是对Edward Wilde的回答的一个非常小的调整,它保留了&lt; pre&gt;的属性。标签
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;
}
答案 9 :(得分:0)
if (typeof div2.innerText == 'undefined')
div2.innerHTML = value;
else
div2.innerText = value;
对我有用。
答案 10 :(得分:0)
我发现innerHTML在应用于元素之前已经过处理,因此&lt; br&gt;变为换行符并删除多个空格。
要保留原始文本,必须使用nodeValue,例如;
document.getElementById('pre_id').firstChild.nodeValue=' white space \r\n ad new line';