`
mutongwu
  • 浏览: 448518 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

innerText与innerHTML

    博客分类:
  • DOM
阅读更多
innerText:获取某元素下面的所有文本内容.
注意:
IE ,CHROME支持 innerText ,Firfox不支持,不过它使用另一个类似的属性textContent.
<body>
<div id="div1">
	<div id="div1-2"><p id="text_p">div1-2 text<font color="blue">x</font></p></div>
	<div id="div1-3">
		<ul id="ul1"><li id="xx">number1</li><li>number2</li><li>number3</li><li>number4</li></ul>
		<ul id="myList"></ul>
	</div>
</div>
</body>


//IE,CHROME
alert(div1.innerText);

//Result:
//--------------------
div1-2 text
number1
number2
number3
number4
//--------------------

//Firefox
alert(div1.textContent)

//Result:
//--------------------
	div1-2 textx
	
		number1number2number3number4
		
	
	
//--------------------


从上面的输出可以看到,使用el.innerText(或者是textContent)来获取里面的内容,假如el包含了多个子节点,例如上述HTML代码中,el为div1的话,innerText将会包含一些空行,空格符,换行符等,结果往往不太可靠。
当然,如果只有一个节点,如el为xx的话,那么innerText(textContext)的内容将会可靠得多。

跨浏览器的innerText读取函数:
function getInnerText(element){
	return (typeof element.textContent == 'string') ?
		Element.textContent : element.innerText;
}
function setInnerText(element, text){
	if (typeof element.textContent == 'string'){
		element.textContent = text;
	} else {
		element.innerText = text;
	}
}



innerHTML:以HTML代码的形式返回某元素下的所有子节点。
innerHTML在浏览器中基本都得到支持。与innerText不同的是,innerHTML的值将被作为HTML代码片段得到浏览器的解析,而不是innerText那样的纯文本。

//红色的'hel< >lo'
myList.innerHTML = '<li><font color="red">hel&lt;&nbsp;&gt;lo</font></li>';



分享到:
评论

相关推荐

    javascript innerText和innerHtml应用

    ### JavaScript中innerText与innerHTML的应用详解 在Web开发中,JavaScript是一种非常重要的客户端脚本语言,它可以帮助我们实现页面上的动态效果。在JavaScript中,`innerText`与`innerHTML`是两个非常常用的属性...

    innerHTML和innerText的区别

    在 JavaScript 中,innerHTML 和 innerText 是两个常用的属性,它们用于获取 HTML 元素中的内容。虽然它们都是用于获取内容的,但它们在获取内容的方式和结果上有所不同。 innerHTML 属性 innerHTML 属性用于获取 ...

    innerText innerHTML的用法以及注意事项 [推荐]

    outerText和outerHTML与innerText和innerHTML类似,但它们同时影响元素自身以及其内部内容。outerText会获取或设置一个元素及其所有后代的文本,而outerHTML则会获取或设置元素及其内容的完整HTML表示。 通过了解...

    js中innerHTML与innerText的用法与区别

    ### JavaScript中的innerHTML与innerText的用法与区别 在前端开发中,经常需要用到JavaScript来操作DOM元素,其中`innerHTML`和`innerText`是非常重要的属性,它们分别用于获取或设置元素内部的HTML内容和纯文本...

    javascript中innerText和innerHTML属性用法实例分析

    在给出的实例代码中,我们可以通过不同的函数来测试和修改`innerText`和`innerHTML`的值。`TestOutput`函数分别使用`innerText`和`innerHTML`属性获取了元素的文本和HTML内容,并通过`alert`弹出。`EditInnerText`和...

    innerHtml用法精解

    `innerText`与`innerHTML`都是用来获取或设置元素的文本内容,但它们之间存在一些关键区别: - **innerText**:仅获取或设置纯文本内容,忽略所有HTML标签。 - **innerHTML**:获取或设置完整的HTML内容,包括所有...

    innerText和innerHTML 一些问题分析

    需要注意的是,虽然innerText和innerHTML在大部分情况下可以互换使用,但在某些特定场景下,它们的行为可能会有所不同。例如,innerText在处理表单控件如`&lt;input&gt;`或`&lt;textarea&gt;`时可能会有预期之外的效果,因为这些...

    火狐与IE浏览器兼容代码

    ### 火狐与IE浏览器兼容代码:innerText与innerHTML的应用及转换 在Web开发中,兼容性问题一直是开发者关注的重点之一。特别是在早期的浏览器版本中,不同浏览器对某些特性的支持差异导致了开发者不得不采取一些...

    innerHTML、outerHTML、innerText、outerText的用法与区别

    .innerHTM、outerHTML、innerText、outerText的用法与区别 .innerHTML、outerHTML、innerText、outerText是HTML文档对象模型(DOM)中四个常用的属性,它们都是用来操作HTML元素的内容的,但它们之间有着很大的区别...

    innerhtml用法 innertext用法 以及innerHTML与innertext的区别

    在网页开发中,DOM(Document Object Model)操作是不可或缺的一部分,`innerHTML` 和 `innerText` 是两个常用的属性,用于处理HTML元素的内容。了解它们的用法和区别对于编写兼容性的JavaScript代码至关重要。 `...

    innerHTML-outerHTML-innerTEXT.txt

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

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

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

    ajax中的IE和火狐的区别

    #### 一、InnerText与InnerHTML - **innerText**: IE支持`element.innerText`,而Firefox则不支持。因此,在获取或设置文本内容时,应考虑使用`element.textContent`作为跨浏览器的替代方案。 - **innerHTML**: ...

    IE_FF兼容性

    innerText与innerHTML - **IE**: 在IE中,可以使用`obj.innerText`来设置或获取文本内容。 - **FF**: FF不支持`innerText`属性,而只能使用`obj.innerHTML`。 **示例**: ```javascript if (typeof document.body...

    InnerHtml和InnerText的区别分析

    在编程领域,尤其是在Web开发中,常常会遇到与HTML元素操作相关的属性,其中`InnerHtml`和`InnerText`是两种常见的属性,它们在处理网页内容时有着不同的行为和用途。本文将深入探讨这两个属性的区别,并提供详尽的...

    innerHTML,outerHTML,innerText,outerText的用法及区别解析

    在JavaScript中,`innerHTML`, `outerHTML`, `innerText`, 和 `outerText` 是四个非常重要的属性,用于操作HTML元素的内容。下面将详细解释这些属性的用法和它们之间的区别。 1. **innerHTML** - `innerHTML` 属性...

Global site tag (gtag.js) - Google Analytics