关于innerText和textContent

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>RunJS</title>
	</head>
	<body>
		<div name="dddd">
			<ul>
			<li>sssssss</li>
			<li>sssssss</li>
			<li>sssssss</li>
			<li>sssssss</li>
			<li>sssssss</li>
			</ul>
		</div>
		<script>
		  var odiv=document.getElementsByTagName("div")[0];
			function setText(element,text){
				if(typeof element.textContent=="string"){
				     element.textContent=text;
				}else{
				     element.innerText=text;
				   }
        }
			function getText(element){
				return (typeof element.textContent=="String")?element.textContent:element.innerText;
			}
		  document.write(getText(odiv))
		</script>
	</body>
</html>

innerText火狐支持不好,一般我们获取文本都是innerHTML,但是子标签和注释都会出现的。不太好。

innerText刚好解决我们的需求,火狐不支持,但是支持textContent这样就简单多了。兼容一下。两个函数get和set分别获取和设置文本。

时间: 2024-10-18 12:32:37

关于innerText和textContent的相关文章

[转]被玩坏的innerHTML、innerText、textContent和value属性

一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它,一般情况下我们可以使用textContent来代替,但它两者是否就能完全等同呢?在坑爹的表单元素(如input.textarea等)中表现是否依旧诡异呢?文本将记录一些实验结果,避免日后被玩坏. 二.innerHTML 由于innerText和textContent均为对innerHTML内容作不同的处理而成,因此我们需要先明确innerHTML属性的特点. 赋值操作:先对值内容进行模式匹配,然后把处理后的

JS魔法堂:被玩坏的innerHTML、innerText、textContent和value属性

一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它,一般情况下我们可以使用textContent来代替,但它两者是否就能完全等同呢?在坑爹的表单元素(如input.textarea等)中表现是否依旧诡异呢?文本将记录一些实验结果,避免日后被玩坏. 二.innerHTML 由于innerText和textContent均为对innerHTML内容作不同的处理而成,因此我们需要先明确innerHTML属性的特点. 赋值操作:先对值内容进行模式匹配,然后把处理后的

javascript中innerText和textContent的兼容问题

IE支持innerHTML与innerText FireFox支持innerHTML与textContent 所以在IE与FireFox中使用显示内容时 必须得先判断浏览器 然后决定使用innerText还是textContent javascript中innerText和textContent的兼容问题

innerHTML/outerHTML; innerText/outerText; textContent

innerHTML v.s. outerHTML Element.innerHTML Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML Functionality Get serialized HTML code describing its descendants. Set : Remove all the children, parse the content string and as

value,innerHTML,innerText,textContent属性

value是带有value属性的标签拥有的值.一般是单闭合标签的属性.(可赋值,也可获取值) innerHTML属性,双闭合标签两个标签之间的内容.(识别标签)(可赋值,也可获取值) innerText属性,双闭合标签两个标签之间的内容.(不识别标签)(可赋值,也可获取值) textContent属性和innerText类似,老版本的火狐支持该属性(无老版本,未打印).(可赋值,也可获取值) <!DOCTYPE html> <html> <head lang="en

innerHTML,innertext ,textcontent,write()

innerhtml属于对象的一个属性,一般用于向已经存在的标签中写入内容,或者读取标签的内容. innertext属于对象的一个属性,一般只能用于写入内容,或者读取内容,不能读取dom 中的标签,且只适用于IE. 综上,一般我们为了提高代码的兼容性,建议使用innerhtml.但是innerhtml在IE 下却只能读取不能操作,这就涉及到createelement方法以及appendchild,先创建元素节点,继续用appendchild添加子元素,然后innerhtm添加内容. textcon

innerText与textContent的异同

转载自BetaRabbit的博文 今天在使用innerText时遇到一个兼容性问题,FireFox不支持innerText方法,查了下MDN,发现FireFox下有个类似的方法,叫textContent,它和IE的innerText类似, 都是用来获取(设置)元素中text的方法. 语法 设置 element.textContent = "text"; 获取 var text = element.textContent;      Note: textContent和innerText

JavaScript DOM操作案例封装innerText跟textContent函数(浏览器兼容)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 500px; height: 20px; border: 2px solid red; } </style> </head> <body> <i

innerHTML outerHTML innerText textContent的区别

在网上看了很多博文介绍他们之间的区别,大部分都说FF中innerText不能使用,但经过自己试验,是可以用的,所以自己把各种情况总结了一下. 首先是innerHTML,这个就不用多说了,返回的是标签内部所有的内容,包括标签和文本,还有空格 举两个栗子,对比一下空格导致的输出区别 <div id="main">1 <span>123</span> <p>222</p> <div class="test"