innerText与innerHTML

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>';



你可能感兴趣的:(html,浏览器,chrome,IE,firefox)