`

innerHTML and text normalization

    博客分类:
  • web
阅读更多
http://www.quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html

IE applies HTML normalization to the data that is assigned to the innerHTML property. This causes incorrect display of whitespace in elements that ought to preserve formatting, such as <pre> and <textarea>

Test page. Workaround is not included.


I've found out that setting outerHTML doesn't trigger normalization. So I've decided to test for .outerHTML property and if not false (i.e., IE), prepend and append the opening and closing pre tags to the content I want to set and assign that to outerHTML.

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

(Works with IE & FF)
分享到:
评论

相关推荐

    innerHtml(转)

    1. **innerHTML的基本用法**:如何通过`innerHTML`读取和修改元素的内容。例如,`element.innerHTML`返回元素的HTML,而`element.innerHTML = someHTMLString`则将元素内容替换为指定的HTML字符串。 2. **性能影响*...

    innerHTML的使用

    innerHTML的使用document.getElementById("id").innerHTML = "contenttext";

    innerHTML的简单应用

    innerHTML的简单应用

    关于在innerHTML中JS不执行的问题

    首先,我们需要理解`innerHTML`的工作原理。当设置一个元素的`innerHTML`时,浏览器会做以下几件事: 1. 清空当前元素的所有子节点。 2. 解析新设置的HTML字符串,生成一个DOM树。 3. 将新的DOM树插入到原始元素的...

    js中innerHTML与innerText的用法与区别

    element.innerHTML = "&lt;span style='color:red'&gt;New Text&lt;/span&gt;"; // 获取innerHTML console.log(element.innerHTML); // 输出: &lt;span style="color:red"&gt;New Text ``` #### 2. `innerText` `innerText`属性用于...

    解决ajax返回innerHTML中javascript不能运行问题

    解决 Ajax 返回 innerHTML 中 JavaScript 不能运行问题 在实际应用中,我们经常会遇到使用 Ajax 返回某一个网页的内容到模板页面的某一个 `&lt;div&gt;` 标签中显示的操作。如果返回的值仅仅是文本类数据,不会影响模板...

    innerHTML和innerText的区别

    innerHTML 属性 innerHTML 属性用于获取 HTML 元素中的所有内容,包括 HTML 标签。例如,在上面的代码中,test.innerHTML 的值就是“&lt;span style="color:red"&gt;test1&lt;/span&gt; test2”,包括 HTML 标签。 innerHTML ...

    通过改变innerHTML的内容,动态增加选择项

    本文将深入探讨如何通过改变`innerHTML`的内容来动态增加选择项,以及在实际开发中的应用。 首先,我们要理解`innerHTML`的工作原理。`innerHTML`可以获取或设置一个元素的所有HTML内容。当我们设置`innerHTML`时,...

    利用innerHTML实现隐显效果-两种实现方法

    本文将探讨如何利用innerHTML实现页面元素的隐藏与显示效果,同时提供两种不同的实现方法。 首先,我们需要理解innerHTML的工作原理。innerHTML允许我们获取或设置一个元素的所有子节点,包括文本、HTML标签等。当...

    react-Innerself使用innerHTML将ReactRedux转换成50行代码

    标题中的“react-Innerself使用innerHTML将ReactRedux转换成50行代码”表明这是一个关于简化React和Redux集成的项目,它使用了一种叫做Innerself的技术。Innerself是一种轻量级的解决方案,通过innerHTML属性来实现...

    innerHTML-outerHTML-innerTEXT.txt

    根据提供的文件信息,我们可以深入探讨三个重要的DOM属性:`innerHTML`、`innerText`以及`outerHTML`。这些属性在Web开发中非常关键,用于获取或设置元素内部的内容。接下来将详细解析这些属性的功能、用途及差异。 ...

    超全面javaweb第4天- 08 innerHTML属性

    超全面javaweb第4天-_08_innerHTML属性

    前端教程:48 日期对象 定时器和innerhtml

    千锋Web前端教程_48_日期对象_定时器和innerhtml

    简单日历和innerHTML使用

    简单日历和innerHTML使用 javascript的简单应用实例 可以自定义Css

    IE6/7/8中使用innerHTML清空元素,其子元素也被清空

    本文将深入探讨一个特定的问题,即在Internet Explorer 6、7和8(以下简称IE6/7/8)浏览器中使用`innerHTML`属性清空元素时,其子元素也会被一并清空的特性。这个现象在其他现代浏览器中并不常见,因此了解这一问题...

    day30-Auto Text Effect(自动文本吐字效果)

    text.innerHTML = text.innerHTML.slice(0, -1) + '|'; // 移除最后一个字符并添加光标 setTimeout(removeLastChar, 500); } function removeLastChar() { text.innerHTML = text.innerHTML.slice(0, -2); // ...

    html innerHTML outerHTML innerText outerText等的区别及实例汇总

    html js innerHTML outerHTML innerText outerText 等的区别及实例汇总

    python教程-04-获取和设置标签内容(innerHTML).ev4.rar

    要获取HTML元素的innerHTML,可以先找到目标元素,然后调用`.string`或`.get_text()`方法。要设置innerHTML,可以使用`.replace_with()`方法将新内容替换到指定元素。 ```python from bs4 import BeautifulSoup ...

    innerHtml用法精解

    ### innerHtml用法精解 #### 一、InnerHtml简介及基本用法 `innerHTML`是HTML DOM(Document Object Model)的一个属性,用于获取或设置某个元素内的HTML内容。使用`innerHTML`,开发者可以直接操作HTML内容,从而...

    innerHTML_outerHTML.rar_javascript

    `innerHTML` 属性: `innerHTML` 用于获取或设置一个元素的HTML内容,包括开始标签、结束标签以及它们之间的所有内容。当你想要读取元素内HTML代码或者动态地修改元素内部的HTML结构时,`innerHTML` 就非常有用。...

Global site tag (gtag.js) - Google Analytics