在IE中的pre元素中使用innerHTML插入换行符(\n)不起作用？

在Internet Explorer（IE）中，<pre>元素中的换行符（\n）可能不会按预期显示。为了在<pre>元素中实现换行，您可以尝试使用<br>标签代替。

例如，使用innerHTML将文本设置为：

var preElement = document.getElementById("yourPreElement");
preElement.innerHTML = "第一行<br>第二行";

这将使得在<pre>元素中显示两行文本，而不是使用\n。

如果您希望在不同浏览器中保持一致的换行行为，可以考虑使用以下方法：

var text = "第一行\n第二行";
var formattedText = text.replace(/\n/g, "<br>");
preElement.innerHTML = formattedText;

这将确保在所有浏览器中，<pre>元素中的换行符都以<br>标签的形式呈现。

相关·内容

在set中插入元素x，实际插入的是构成的键值对，

函数声明功能介绍pair insert ( const value_type& x )在set中插入元素x，实际插入的是构成的键值对，如果插入成功，返回,如果插入失败，说明x在set中已经存在，返回void erase ( iterator position )删除set中position...last )删除set中[ﬁrst, last)区间中的元素void swap ( set& s );交换两个set中的元素void clear ( )将...在map中，键值key通常用于排序和惟一地标识元素，而值value中存储与此键值key关联的内容。...map中通过键值访问单个元素的速度通常比unordered_map容器慢，但map允许根据顺序对元素进行直接迭代(即对map中的元素进行迭代时，可以得到一个有序的序列)。

541 0

jQuery 中在元素中添加插入内容方法 after, append, appendTo, before, prepend, prependTo 的区别

jQuery 在元素中添加插入内容的方法和区别，整理成表格，省的每次都要翻： jQuery方法解释 after() 在被选元素之后插入指定内容 insertAfter() 在被选元素之后插入 HTML...如果用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。...append() 在被选元素的结尾（仍然在内部）插入指定内容 appendTo() 在被选元素的结尾（仍然在内部）插入 HTML 标记或已有的元素。...before() 在被选元素之前插入指定内容 insertBefore() 在被选元素之前插入 HTML 标记或已有的元素。如果用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之前。...prepend() 在被选元素的开头（仍然在内部）插入指定内容 prependTo() 在被选元素的开头（仍然在内部）插入 HTML 标记或已有的元素千言解释不如一图示意：具体代码： <div

1.8K3 0

使用LaTex在文章中如何插入我们常用的数学公式？

📷 1、点击[编辑区] 📷 2、点击[L] 📷 3、点击[dvi pdf] 📷

3K2 0

链表----在链表中添加元素详解--使用链表的虚拟头结点

在上一小节中关于在链表中头部添加元素与在其他位置添加元素在逻辑上有所差别，这是由于我们在给链表添加元素时需要找到待添加元素位置的前一个元素所在的位置，但对于链表头来说，没有前置节点，因此在逻辑上就特殊一些...为了针对头结点的操作方式与其他方式一致：接下来我们就一步一步引入今天的主题--使用虚拟头结点。首先来看看之前的节点结构--第一个是头结点 ? ...则dummyHead节点变为了0这个节点（头结点）的前置节点，则现在所有节点都有了前置节点，在逻辑可以使用统一的操作方式。...size = 0; } （3）改进之前的add（int index,E e）方法，之前对在头结点添加元素单独做了处理（if-else判断），如下： 1 //在链表的index(0--based...LinkedList() { 43 dummyHead = new Node(null, null); 44 size = 0; 45 } 46 47 //获取链表中的元素个数

1.8K2 0

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

XML DOM - 导航节点可以使用节点之间的关系来导航节点。导航 DOM 节点通过节点之间的关系在节点树中访问节点，通常被称为"导航节点"。...为了避免导航到空文本节点（元素节点之间的空格和换行符），我们使用一个检查节点类型的函数：function get_nextSibling(n) { var y = n.nextSibling;...getAttribute() 方法返回属性的值。获取元素的值在 DOM 中，一切都是节点。元素节点没有文本值。元素节点的文本值存储在子节点中，这个节点被称为文本节点。...更改元素的值在 DOM 中，一切都是节点。元素节点没有文本值。元素节点的文本值存储在子节点中，这个节点被称为文本节点。要更改元素的文本值，必须更改元素的文本节点的值。...将节点追加到元素。插入节点 - insertBefore()insertBefore() 方法在指定的子节点之前插入一个节点。

1331 0

力扣题(2的幂)——学习到JAVA按位与“&”在“n&(n-1)”中的使用

如上图，求一个数是不是2的幂，一行代码解决。那么，(n & (n-1)) == 0是什么意思呢 java中“&”表示按位与操作，他把左右变为二进制然后按位取与。...“n=n&(n-1)”的意思就是去掉“n的二进制”的最后一个1. 如果A&B==0，表示A与B的二进制形式没有在同一个位置都为1的时候。这句话到底啥意思？？不妨先看下n-1是什么意思。...n&(n-1)=1101010000 由此可以得出，n和n-1的低位不一样，直到有个转折点，就是借位的那个点，从这个点开始的高位，n和n-1都一样，如果高位一样这就造成一个问题，就是n和n-1在相同的位上可能会有同一个...1，从而使((n & (n-1)) !...= 0),如果想要 ((n & (n-1)) == 0)，则高位必须全为0，这样就没有相同的1。所以n是2的幂或0

5274 0

编写一个void sort(int*x,int n)实现将x数组中的n个数据从大到小排序。n及数组元素在主函数中输入。将结果显示在屏幕上并输出到文件

#include void sort(int*x,int n) { int i,j,k,t; for(i=0;i<n-1;i++) { k=i; for(j=i+1;j<n;j+...numbers:"); for(i=0;i<10;i++) scanf("%d",p++); p=a; sort(p,10); for(;p<a+10;p++) { printf("%d\n"

8.7K3 0

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

表单中的文本域（元素）可以接受包含换行符的文本数据，这是它有别于文本框（text 类型的元素）的重要特征之一，所以我们通常也称它为“多行文本框”。...然而，目前网民使用最为广泛的 IE6 和 IE7 浏览器都是基于 CSS1 和部分 CSS2 的，它们完全不能识别 pre-wrap，当然也无法实现 pre-wrap 的空白符处理行为。...在疯狂地问候了微软、IE 及其相关人等之后，网页开发者们还是不得不面对这个问题——如何在 IE6,7 下实现 pre-wrap 的效果？...在 IE6,7 下变通实现 pre-wrap 经常反复测试，我们找到了在 IE6,7 下变通实现 pre-wrap 效果的方法。...而对于 IE6,7，我们使用了 CSS hack，让它接受额外的样式声明，使用其它方法来实现类似 pre-wrap 的效果。

2.4K3 1

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

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

2.4K3 0

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

5.1K19 6

59道CSS面试题(附答案)

解决方法是使用 JavaScript代码库，或使用IE滤镜注意：在使用E滤镜解决PNG图片透明度的时候，在1E6中，会对事件产生影响。 20、页面重构怎样操作？...23、简要描述CSS中 content属性的作用。 content属性与：before及：after伪元素配合使用，用来插入生成的内容，可以在元素之前或之后放置生成的内容。...IFC中是不可能有块级元素的，当插入块级元素时（如在p中插入div），会产生两个匿名块，两者与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。...pre表示不会合并空白符，渲染换行符，不会自动换行，相当于pre元素。 pre-wrap表示不会合并空白符，渲染换行符，自动换行pre-line表示合并空白符，渲染换行符，自动换行。...IE6双边距Bug是指在块属性标签float后又有横行的 margin时，在IE6中显示的margin比设置的大浮动IE产生的双倍距离（IE6的双边距问题是指在IE6下，如果对元素设置了浮动，同时又设置了

4.9K5 0

Vue使用问题记录

vue_logo.png Vue使用中遇到的问题总结记录。...内容比较基础，无奈我是菜鸟 1、Vue中字符串换行不起作用 {{item.content}} content字符串很长，内部的换行符\n不起作用。...解决： {{item.content}} 其中div不能换行，如果换行后首行缩进的距离很大。...其实设置为pre即可使换行符发挥作用，但这时文本在div宽度不足时不会自动换行，而是撞破边界延伸到div外部去，所以还得加上wrap。...以后文章会不断的更新，介绍关于iOS开发学习总结，介绍基于MUI 、H5+ 及H5开发中感悟记录总结。感觉有用就点赞哈，喜欢就大胆的关注。

1.4K2 0

CSS3实现loading点点点动画效果

a9conent%e9%87%8c%e7%9a%84%e6%96%87%e5%ad%97%e6%8d%a2%e8%a1%8c-%ef%bc%88content-da%ef%bc%89/ 其中'\A'其实指的是换行符中的...LF字符，其unicode编码是000A，在CSS content属性中则直接写作'\A'；换行符除了LF字符还有CR字符，其Unicode编码是000D，在CSS content属性中则直接写作'\D..."; white-space: pre; animation: spin4 2s steps(4) infinite; } 而我的实现的是使用自定义的元素，CSS部分使用的是::before...'; white-space: pre-wrap; animation: dot 3s infinite step-start both; } 使用自定义元素的好处是IE7,IE8浏览器根本就不认识这个元素...，相关CSS会忽略，直接显示3个点；使用::before伪元素，display设置为block原因在于其他现代浏览器可以把原来的3个点推到看不见的最下面，显示的是content插入的第1行的3个点。

3.3K2 0

【实战】我是如何在输入框实现@ At功能的

// 需要在字符前插入一个空格否则、在换行与两个@标签连续的时候导致无法删除标签 let spanNode = document.createElement('span'); spanNode.innerHTML...Event.returnValue 兼容IE取消默认事件到现在我们的核心功能已经完成了。通过@人的监听事件，通过我们自定义的标签插入，通过getSelection获取到的光标位置。...contents.length) { const index = contents.length - 1 // 在文本中拆入换行符号兼容...获取光标的坐标在文本中的位置 caret-pos 从 textarea、contentedtiable 或 iframe 正文中获取插入符号/光标的位置/偏移量 import { position, offset...这个功能只是在开发中挤出来的、很多东西写的不够好、不够完善，希望本文能帮助您在开发中节约一点时间。也欢迎大家提出踊跃的反馈、希望能与大家共进步，加油～

2.5K2 0

【技术创作101训练营】innerHTML插入运行js字符串问题探究

的HTML元素, 另一个就是替换指定DOM的HTML元素 2. innerHTML插入js会发生什么什么也不会发生, 因为用 innerHTML 插入文本到网页中有可能成为网站攻击的媒介，从而产生潜在的安全风险问题...所以HTML 5 中指定不执行由 innerHTML 插入的标签。...w3help上说 IE6 IE7 IE8 使用 innerHTML 方法插入脚本时，SCRIPT 元素必须设置 defer 属性。...firefox 先将被插入 HTML 代码的元素从其父元素中移除，然后使用innerHTML插入包含SCRIPT元素的代码，最后将这个元素恢复至原父元素中，则经过此操作后SCRIPT中的脚本可以被执行。...--\s*/g, "") } } 最后就是, 循环缓存的script数组和html数组, 创建script标签对象, 并插入到指定dom中; 拼接html字符串, 并插入到指定的dom中 let

1.2K0 0

JavaScript | 选中并获取多行文本框内容的效果

涉及的基本属性知识 2.1 innerHTML属性 innerHTML是一个在JS中拥有双向功能的属性，它可以获取对象的内容，同时又可以向对象插入内容。...所以在使用JS处理内容时，通常是需要借助标签的innerHTML属性，对标签元素的内容进行修改。即把内容赋值给这个属性即可。...如下是依据转义字符“\n”的做字符串切割的书写： var arr = nowText.innerHTML.split('\n'); 3....其中用户在谷歌、火狐浏览器中选择文本时需要借助getSelection()方法，而IE浏览器则借助的是selection()方法。...而在IE浏览器中要操作选中区需要先使用createRange()方法创建一个文本域对象，具体使用如下： if(document.selection) { // document.selection.createRange

5.1K6 0

JavaScript DOM基础

document.getElementsByTagName('*');//获取所有元素 PS：IE浏览器在使用通配符的时候，会把文档最开始的html的规范声明当作第一个元素节点。...PS：在IE7及更低的版本中，使用setAttribute()方法设置class和style属性是没有效果的，虽然IE8解决了这个bug，但还是不建议使用。...(box.childNodes[0]);//获取第一个子节点对象 PS：使用childNodes[n]返回子节点对象的时候，有可能返回的是元素子节点，比如 HTMLElement；也有可能返回的是文本子节点... === 3) { alert('文本节点：' + box.childNodes[i].nodeValue); } } PS：在获取到文本节点的时候，是无法使用innerHTML这个属性输出文本内容的。...alert(body.childNodes.length);//得到子节点个数，IE3个，非IE7个 PS：在非IE中，标准的DOM具有识别空白文本节点的功能，所以在火狐浏览器是7个，而IE自动忽略了

1.4K9 0

JavaScript DOM操作表格及样式

集合中的指定位置插入一行元素添加的属性和方法属性或方法说明 rows 保存着元素中行的HTMLCollection deleteRow(pos) 删除指定位置的行 insertRow...(pos) 向rows集合中的指定位置插入一行，并返回引用元素添加的属性和方法属性或方法说明 cells 保存着元素中单元格的HTMLCollection deleteCell(...pos) 删除指定位置的单元格 insertCell(pos) 向cells集合的指定位置插入一个单元格，并返回引用因为表格较为繁杂，层次也多，使用DOM只是来获取某个元素会非常难受，所以使用HTML... alert(table.children[0].innerHTML);//获取caption的内容 PS：这里使用了children[0]本身就忽略了空白，如果使用firstChild...注意：在一个表格中和是唯一的，只能有一个。

3.6K10 0

dojodom-construct.toDom方法学习笔记

toDOM将html转换为dom节点，我能想到的是两种方法：利用正则表达式，依次匹配出所有标签；首先需要一个正确的正则，其次需要保证正确的节点关系利用dom的api来做，这个我们可以创建一个元素使用...innerHTML赋值会被浏览器忽略，但是如果作为dom节点直接挂载到dom树中，浏览器会为他们自动创建隐含的包装元素。...所以在遇到这些标签开头的html片段时，我们需要手动补全缺失的包装元素。　　下面我们来看一下dom-construct模块是怎么处理的。　　...html标签，如果含有html标签而且需要我们补全包装元素，则利用上面生成的pre和post补全标签后传递给master这个容器的innerHTML，这一步完成后找到我们传入的html标签对应的dom树...在将文档片段作为参数传递给这两个方法时，实际上只会将文档片段的所有子节点添加到相应的位置上；文档片段本身永远不会称为文档树的一部分利用innerHTML标签创建dom元素，并自动补齐缺失的标签，这就是

4421 0

熟悉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对溢出文本显示省略号有两个好处，一是不用通过程序限定字数...需要使用对对溢出文本显示省略号的通常是文章标题列表，这样处理对搜索引擎更友好，因为标题实际上并未被截字，而是局限于宽度而未被显示而已。

8373 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云