首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在IE中设置innerHTML时,<pre>标签会丢失换行符

在 Internet Explorer (IE) 中,设置 innerHTML 时,<pre> 标签的换行符可能会丢失。为了解决这个问题,可以使用以下方法:

  1. 使用 innerText 代替 innerHTML

使用 innerText 而不是 innerHTML 可以保留 <pre> 标签中的换行符。例如:

代码语言:javascript
复制

var preElement = document.querySelector('pre');

preElement.innerText = '这里是文本\n换行符应该被保留';

代码语言:txt
复制
  1. 使用 CSS 样式保留换行符:

可以使用 CSS 样式 white-space: pre-wrapwhite-space: pre-line 来保留 <pre> 标签中的换行符。例如:

代码语言:html
复制

<style>

代码语言:txt
复制
 pre {
代码语言:txt
复制
   white-space: pre-wrap;
代码语言:txt
复制
 }

</style>

<pre id="myPreElement">这里是文本

换行符应该被保留</pre>

<script>

代码语言:txt
复制
 var preElement = document.getElementById('myPreElement');
代码语言:txt
复制
 preElement.innerHTML = preElement.innerHTML.replace(/\n/g, '<br>');

</script>

代码语言:txt
复制
  1. 使用 JavaScript 替换换行符为 <br> 标签:

在设置 innerHTML 之前,可以使用 JavaScript 将换行符替换为 <br> 标签。例如:

代码语言:javascript
复制

var preElement = document.querySelector('pre');

preElement.innerHTML = '这里是文本\n换行符应该被保留'.replace(/\n/g, ' ');

代码语言:txt
复制

这些方法可以帮助在 Internet Explorer (IE) 中保留 <pre> 标签中的换行符。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何在 IE6,7 下实现 white-space: pre-wrap;

于是我们经常会把一段表示计算机代码的文本放进 标签,它们浏览器中会表现出自身的空格缩进和换行效果,而不需要我们增加额外的样式和标签来控制它的缩进和换行。...white-space 属性 CSS 的 white-space 属性用于设置文本空白符的处理规则,这其中包括:是否合并空白符、是否保留换行符、是否允许自动换行。...这时,对照一下上表各属性值的不同行为特征,我们会发现 pre-wrap 这个属性值脱颖而出——它正是我们所需要的。 对 pre-wrap 的另一种需求 再来看另一种实战可能遇到的情形。... IE6,7 下变通实现 pre-wrap 经常反复测试,我们找到了 IE6,7 下变通实现 pre-wrap 效果的方法。...首先, IE6,7 下,{white-space: pre-wrap;} 这条样式声明由于不能识别而被丢弃,于是我们为 .content 另外设置了 {white-space: pre;} 的样式。

2.2K31

使用 white-space 来实现保留文本域 textarea的换行格式和 空格格式

背景 昨天产品需求评审,产品经理收到用户的反馈,系统中有一些文本域,用户希望在在文本填写的文本内容和格式都能够被保留下来,目前只能保存文本内容,对于文本域的换行和空格,显示的时候都没有正确显示。...接到这个需求,我搜索了一下,网上大多数是获取文本域的内容后,将其中的换行符,空格替换成html标签,如, 使用JavaScript处理,然后将这些数据转化后,保存的后端,显示,使用innerHTML...来显示到一个div或p标签内。...遇到换行符或者 元素才会换行。 pre-wrap 连续的空白符会被保留。遇到换行符或者 元素,或者需要为了填充「行框盒子(line boxes)」才会换行。...pre-line 连续的空白符会被合并。遇到换行符或者 元素,或者需要为了填充「行框盒子(line boxes)」时会换行。

2.2K30

使用 white-space属性 来实现保留文本域 textarea的换行格式和空格格式

背景 昨天产品需求评审,产品经理收到用户的反馈,系统中有一些文本域,用户希望在在文本填写的文本内容和格式都能够被保留下来,目前只能保存文本内容,对于文本域的换行和空格,显示的时候都没有正确显示。...接到这个需求,我搜索了一下,网上大多数是获取文本域的内容后,将其中的换行符,空格替换成html标签,如, 使用JavaScript处理,然后将这些数据转化后,保存的后端,显示,使用innerHTML...来显示到一个div或p标签内。...遇到换行符或者 元素才会换行。 pre-wrap 连续的空白符会被保留。遇到换行符或者 元素,或者需要为了填充「行框盒子(line boxes)」才会换行。...pre-line 连续的空白符会被合并。遇到换行符或者 元素,或者需要为了填充「行框盒子(line boxes)」时会换行。

4.7K196

HTMLCSS面试题(收集)

没有设置宽度的情况下,默认宽度总是其父元素的宽度。 行内元素转换成块元素,只要设置其display属性为block即可,display:block; 。...DOCTYPE不存在或格式不正确导致文档以兼容模式呈现。 4、引入样式,link和@import的区别?...链接样式,link只能在HTML页面引入外部样式 导入样式表,@import 既可以HTML页面中导入外部样式,也可以CSS样式文件中导入外部CSS样式。 5、html5有哪些新特性?...、url、search; (7)新的技术webworker, websocket, Geolocation; IE8/IE7/IE6支持通过document.createElement方法产生的标签...absolute是向上找其父元素,直到找到不是static定位的元素进行定位。一般使用absolute的时候,都会给其父元素设置position:relative属性,使其基于父元素定位。

37820

dojodom-construct.toDom方法学习笔记

; 设值先将字符串转化为dom节点,然后用dom节点替换元素的子元素;此时如果字符串中有特殊标签开头,比如tbody、thead、tfoot、tr、td、th、caption、colgroup、...innerHTML赋值会被浏览器忽略,但是如果作为dom节点直接挂载到dom树,浏览器会为他们自动创建隐含的包装元素。...所以遇到这些标签开头的html片段,我们需要手动补全缺失的包装元素。   下面我们来看一下dom-construct模块是怎么处理的。   ...html标签,如果含有html标签而且需要我们补全包装元素,则利用上面生成的pre和post补全标签后传递给master这个容器的innerHTML,这一步完成后找到我们传入的html标签对应的dom树...将文档片段作为参数传递给这两个方法,实际上只会将文档片段的所有子节点添加到相应的位置上;文档片段本身永远不会称为文档树的一部分 利用innerHTML标签创建dom元素,并自动补齐缺失的标签,这就是

39510

59道CSS面试题(附答案)

默认情况下,块级元素独占一行。例如都是块级元素,当显示这些元素中间的文本,都将从新行开始显示,其后的内容也将在新行显示。...CSS,任何元素都可以浮动。不论浮动元素本身是何种元素,都会生成个块级框。因此,对于内联元素,如果设置为浮动,产生和块级框相同的效果。 23、简要描述CSS content属性的作用。...可以用于消除 inline- block元素间的换行符空格间隙 48、有什么方式可以对一个DOM设置它的CSS? 有以下三种方式。 外链式,即通过link标签引入一个外部CSS文件。...pre表示不会合并空白符,渲染换行符,不会自动换行,相当于pre元素。 pre-wrap表示不会合并空白符,渲染换行符,自动换行pre-line表示合并空白符,渲染换行符,自动换行。...IE6双边距Bug是指在块属性标签float后又有横行的 marginIE6显示的margin比设置的大浮动IE产生的双倍距离(IE6的双边距问题是指在IE6下,如果对元素设置了浮动,同时又设置

4.8K50

JavaScript---网络编程(7)-Dom模型(节点间的层次关系,节点的增、删、改)

利用节点间的层次关系获取节点: 上一节讲了3获取的方式: * ※※一、绝对获取,获取元素的3种方式:—Element * 1、getElementById(): 通过标签的id属性值获来取该标签对象...* 2、getElementsByName(): 通过标签的name属性值来获取该标签对象集合 * 3、getElementsByTagName(): 通过标签名来获取该标签对象集合 现在来看看相对获取的方式...需注意几点: 1,标签下还隐藏一个标签,下面才是 2,空白符(空格或换行符)是被看成是一个文本节点的。...设置或获取位于对象起始和结束标签内的 HTML。...360-8.1浏览器无效-IE支持 //※removeNode()方法不建议使用,因为这种删除不彻底!

81610

熟悉white-space

定义和用法 white-space 属性设置如何处理元素内的空白。 这个属性声明建立布局过程如何处理元素的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。...属性,任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit” 可能的值 值 含义 normal 默认。...其行为方式类似 HTML 标签 nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 标签为止 pre-wrap 保留空白符序列,但是正常地进行换行 pre-line...合并空白符序列,但是保留换行符 inherit 规定应该从父元素继承 white-space 属性的值 可能使用场景 使用text-overflow:ellipsis对溢出文本显示省略号有两个好处,一是不用通过程序限定字数...其中,overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号;-o-text-overflow: ellipsis针对Opera;而宽度的设定主要是针对IE6

81830

DOM 节点遍历:掌握遍历 XML文档结构和内容的技巧

其中一个重要的差异是:它们如何处理空格和换行符DOM - 空格和换行符XML 经常包含节点之间的换行符或空格字符。当文档由简单编辑器(如记事本)编辑,通常会出现这种情况。...,而其他浏览器。...当解析 XML 元素,还会解析 XML 标签之间的文本:This text is also parsed解析器执行此操作是因为 XML 元素可以包含其他元素,如此示例的...getElementsByTagName 方法getElementsByTagName() 方法按照它们源文档中出现的顺序,返回指定标签名的所有元素的节点列表。... book 元素存在属性,删除属性XML DOM 添加节点添加节点 - appendChild()appendChild() 方法将子节点添加到现有节点。

9610

HTML语义化:HTML5的新标签IE5.5~9的部分兼容方案

一、前言                               本文将介绍HTML5新增的语义化标签,及IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理。...IE5.5~8下对于不支持的标签遇到以下问题 2....三、让IE5.5~9支持HTML5的新标签                 1. IE5.5~8下对于不支持的标签遇到以下问题      ①....(初看之下觉得这不是被整段注释掉了吗?)其实这里利用了IE5.5~10支持的条件编译(Conditional Compile)功能。        ...@*/0 2.2. html5shiv——更全面的解决方案(html5shiv@github) 2.1.的解决方案无法解决通过innerHTML属性设置HTML5标签出现的问题,而html5shiv

1.1K100

总结操作标签的内容

实现页面交互效果的时候,操作标签的内容是必不可少的,所以今天我们要给大家总结的是操作标签的内容。...属性,利用它来获取和设置标签的内容,具体我们来看一下innerHTML与outerHTML属性有什么区别?...代码分析: innerHTML属性能够获取元素内的内容(包含标签),outerHTML属性能够获取元素内的内容(包含标签),但是包含本身的元素; IE6~8会将获取到的标签全部转换为大写形式。...属性设置标签的内容 wrapObj.innerHTML = '利用innerHTML属性设置标签的内容'; 结果: ?...:能够获取/设置元素的内容(元素内容可以包含标签); 获取和设置的时候,innerHTML操作的是标签内的内容,outerHTML操作的是标签内的内容并且包含本身; IE6~8会将获取到的标签全部转换为大写形式

1.7K110

消除IE stop running this script弹出框

咋一看, 以为肯定是程序的性能慢得IE自己都受不了了,所以跳个框出来,希望用户手动停止, 我的第一反映当然也是这样....这个设计相当有意思,意味着就算你的代码1秒钟内执行完成了,但是如果这1秒钟之类执行过的语句行数超过了这个预设的固定值,IE还是会弹出这个stoprunning script的框,这显然让我们很困惑....实验一,本实验代码跳出stoprunning this script框,代码如下: ...另外需要注意的是,事实上IE不会每执行一条语句就会检查是否总共执行过的代码行数是否超出了限制,这样显然很耗性能也不明智,IE周期性的去检查,所以如果你 碰巧IE来检查没有超过限制,而不检查超过了限制..., 如果你不知道设置多少合适, 你可以将其设置成0xFFFFFFFF, 这样就可以避免IE弹出"Stop running Script ..."

1.1K10

JS事件篇

事件篇 window.onload:事件 Dom查询 innerhtml ----获取节点的html内容,或者设置对应节点html内容 读取或者设置节点的相关属性 获取元素节点的子节点 children...获取兄弟节点,也可能获取到空白节点 获取兄弟元素 节点的属性 通过nodevalue可以设置文本节点的内容 事件的响应函数,响应函数是给谁绑定的,this就指向谁 获取body标签====》document.body...标签标签之间的空白也会被当成文本节点 IE8一下的浏览器,不会将空白文本当成子节点,所以该属性再IE8返回4个子元素,而其他浏览器都是9个 ---- children属性可以获取到当前元素所有子元素...和Innerhtml类似,但是它会自动将html标签去除掉 ---- 获取兄弟节点,也可能获取到空白节点 获取到的是空白文本节点 ---- 获取兄弟元素 获取前一个兄弟元素,IE8不支持...---- 节点的属性 通过nodevalue可以设置文本节点的内容 ---- 事件的响应函数,响应函数是给谁绑定的,this就指向谁 ---- 获取body标签====》document.body

12.6K10

前端学习(47)~DOM简介和DOM操作

总结:为了获取下一个元素节点,我们可以这样做:IE678用nextSibling,火狐谷歌IE9+以后用nextElementSibling,于是,综合这两个属性,可以这样写: 下一个兄弟节点...总结:为了获取第一个子元素节点,我们可以这样做:IE678用firstChild,火狐谷歌IE9+以后用firstElementChild,于是,综合这两个属性,可以这样写: 第一个子元素节点...IE6/7/8包含注释节点(IE678,注释节点不要写在里面)。 虽然不是标准的DOM属性,但它和innerHTML方法一样,得到了几乎所有浏览器的支持。...(老版本的火狐用textContent) 获取内容举例: 如果我们想获取innerHTML和innerText里的内容,看看如何:(innerHTML获取到标签本身,而innerText则不会)...修改内容举例:(innerHTML修改标签本身,而innerText则不会) nodeType属性 nodeType == 1 表示的是元素节点(标签) 。

1.1K30

《JavaScript 模式》读书笔记(8)— DOM和浏览器模式2

注意:超时时间设置为1毫秒(或者设置为0毫秒)实际上是与浏览器和操作系统相关的。将超时事件设置为0并不意味着没有超时,而是指尽可能快的处理。例如在IE,最快的时钟周期是15毫秒。...可以通过使用expires报头来增加重复访问,请求的文件依然缓存的概率。   ...  但是,实际上有一个标签一直会在脚本运行的网页存在——标签。...@*/false;   上述语句会在除IE以外的所有浏览器中将isIE设置为false(因为这些浏览器忽视注释语句)。但是IEisIE值为true,因为注释语句中有一个“!”。...因此,IE该语句为: var isIE = !

96030
领券