简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于:
1)、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析,而innerText与outerText则不会。
2)、在设置时,innerHTML与innerText仅设置标签内的文本,而outerHTML与outerText设置包括标签在内的文本。
特别说明:
innerHTML是符合W3C标准的属性,而innerText、outerText、outerHTML只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>
详细出处参考:http://jhxk.javaeye.com/blog/353309
代码练习:(ie生效,ff中只有innerHTML是对的)
<script type="text/javascript">
function getinnerHTML()
{
var e=window.document.getElementById("testdiv");
alert(e.innerHTML); //<p>白云</p>
}
function getouterHTML()
{
var e=window.document.getElementById("testdiv");
alert(e.outerHTML); //<div id="testdiv"><p>白云</p></div>
}
function getinnerText()
{
var e=window.document.getElementById("testdiv");
alert(e.innerText); //白云
}
function getouterText()
{
var e=window.document.getElementById("testdiv");
alert(e.outerText); //白云
}
</script>
<div id="testdiv"><p>白云</p></div>
<p>
<input type="button" name="Submit2" value="innerHTML" onClick="getinnerHTML()">
<input type="button" name="Submit" value="outerHTML" onClick="getouterHTML()">
<input type="button" name="Submit2" value="innerHTML" onClick="getinnerText() ">
<input type="button" name="Submit2" value="innerHTML" onClick="getouterText()">
</p>
js dom中的innerHtml、innerText、outerHtml、outerText
精选 转载
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
innerHTML、outerHTML、innerText、outerText的区别
This is a DIV!运行一下上面的代码就知道区别的所在了^_^
button input div html -
innerHTML、innerText和outerHTML、outerText的区别
1、区别描述如下: innerHTML 设置或获取位于对象起始和置时,inn
innerHTML html d3 取对象