js中innerHTML与innerText及outerHTML的用法与区别

Burgdan 2012-11-03

用法:

<divid="test">

<spanstyle="color:red">test1</span>test2

</div>

在JS中可以使用:

test.innerHTML:

也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

上例中的test.innerHTML的值也就是“<spanstyle="color:red">test1</span>test2”。

test.innerText:

从起始位置到终止位置的内容,但它去除Html标签

上例中的text.innerTest的值也就是“test1test2”,其中span标签去除了。

test.outerHTML:

除了包含innerHTML的全部内容外,还包含对象标签本身。

上例中的text.outerHTML的值也就是<divid="test"><spanstyle="color:red">test1</span>test2</div>

完整示例:

<divid="test">

<spanstyle="color:red">test1</span>test2

</div>

<ahref="javascript:alert(test.innerHTML)">innerHTML内容</a>

<ahref="javascript:alert(test.innerText)">inerHTML内容</a>

<ahref="javascript:alert(test.outerHTML)">outerHTML内容</a>

特别说明:

innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:

<ahref="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

-------------------------------------------------------------------------------------------------------------------------------

<html>

<head></head>

<framesetframeborder="yes"frameborder="1"rows="40%,*">

<framename="top"src="1.html">

<framename="bottom"src="2.html">

</frameset>

</html>

<html>

<head>

<scriptlanguage="javascript">

functioninit()

{

varaaa=parent.window.frames[0].document.body.innerHTML;

alert(aaa);

}

</script>

</head>

<body>

<palign="center">nothing</p>

<palign="center"><inputtype="button"onclick="init()";value="click"></p>

</body>

</html>

<html>

<center>汽车房产女人</center>

</html>

相关推荐

swiftwwj / 0评论 2019-12-29