JS中innerHTML与innerText的用法与区别

最新推荐文章于 2022-10-06 21:19:46 发布

evangel_z

最新推荐文章于 2022-10-06 21:19:46 发布

阅读量1k

点赞数

分类专栏： JS 文章标签： function FUNCTION Function javascript JavaScript Javascript javaScript JAVASCRIPT jsp Jsp JSP

JS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

用法：
<div id="test">
<span style="color:red">test1</span> test2
</div>
在JS中可以使用：
test.innerHTML:

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

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

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

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

test.outerHTML:

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

　　上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>
完整示例：

<div id="test">
<span style="color:red">test1</span> test2
</div>
<a href="javascript:alert(test.innerHTML)">innerHTML内容</a>
<a href="javascript:alert(test.innerText)">inerHTML内容</a>
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>
特别说明：

　　innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>
-------------------------------------------------------------------------------------------------------------------------------
<html>
<head></head>
<frameset frameborder="yes" frameborder="1" rows="40%,*">
<frame name="top" src="1.html">
<frame name="bottom" src="2.html">
</frameset>
</html>

<html>
<head>
<script language="javascript">
function init()
{
    var aaa = parent.window.frames[0].document.body.innerHTML;
    alert(aaa);
}
</script>
</head>
<body>
<p align="center">nothing</p>
<p align="center"><input type="button" οnclick="init()"; value="click"></p>
</body>
</html>

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

innerText，outerText，innerHTML，outerHTML
这次我们要使用另一些对象属性对来实现动态改变文本，它们就是：innerText，outerText，innerHTML，outerHTML，千万要注意它们的大小写，因为错一点您就得不到预期的效果了。这是全新的方法，当您掌握它以后将可随心所欲的设计动态内容了，不可错过哦！
例12 动态改变文本和Html

<html> 
<head> 
<title>DHtml举例12</title> 
<style><!-- 
body {font-family:"宋体";color="blue";font-size="9pt"} 
--> 
</style> 
<script language="JavaScript"> 
function changeText() 
{ 
DT.innerText="我很好!"; 
}//function 

function changeHtml() 
{ 
DH.innerHTML="<i><u>我姓肖!</u></i>"; 
}//function 

function back() 
{ 
DT.innerText="您好吗?"; 
DH.innerHTML="您姓什么?"; 
} 
</script> 
</head> 

<body> 
<p><font color="gray">请点击下边的文字……</font> 
<ul> 
<li id="DT" οnclick="changeText()">您好吗? </li> 
<li id="DH" οnclick="changeHtml()">您姓什么? </li> 
<li οnclick="back()">恢复原样! </li> 
</ul> 
</body> 
</html>

innerText属性用来定义对象所要输出的文本，在本例中innerText把对象DT中的文本“您好吗?”变成了“我很好!”（语句DT.innerText="我很好!"）。而对对象DH的改变用了innerHTML属性，它除了有innerText的作用外，还可改变对象DH内部的HTML语句，于是它把文本变成了“我姓肖!”，而且文本输出改成了斜体（<i></i>）并下加一条直线（<u></u>），即语句DH.innerHTML="<i><u>我姓肖!</u></i>"。outerText和outerHTML也具有类似的作用，读者不妨自己试试看。
下面我们来设计一个有趣的动态页面。
例13 文本的动态输入与输出

<html> 
<head> 
<title>DHtml举例13</title> 
<style><!-- 
body {font-family:"宋体";color="blue";font-size:"9pt"} 
.blue {color:blue;font-size:9pt} 
--> 
</style> 
<script language="JavaScript"> 
function OutputText() 
{ 
if(frm.txt.text!="") 
{ Output.innerHTML="在此处输出文本：<u>"+frm.txt.value+"</u>";} //Output为一对象。 
else 
{ Output.innerText="在此处输出文本：";} 
}//function 
</script> 
</head> 
<body> 
<p><br></p> 
<form name="frm"> 
<p><font color="gray">请在文本框中输入文字:</font> 
<input type="text" name="txt" size="50"><br> 
<input type="button" value="输出文本" name="B1" class="blue" οnclick="OutputText()"></p>
</form> 
<p id="Output">在此处输出文本：</p> 
</body> 
</html>

此例的动态效果如下，先在文本框中输入文本，然后按“输出文本”的按钮，接着网页便会自动输出您所输入的文本。
此外，我们还可使用insertAdjacentHTML和insertAdjacentText方法（方法即是某特定对象能直接调用的函数）在先前文本或Html内容的前边或后边插入新的文本或Html内容，使用这些方法需要参数，这些参数有：BeforeBegin、 AfterBegin、 BeforeEnd和AfterEnd，它们是用来标明文本或Html插入的地方。具体用法如下例：
例14 使用insertAdjacentHTML插入文本

<html> 
<head> 
<title>DHtml举例14</title> 
<style><!-- 
body {font-family:"宋体";color="blue";font-size:"9pt"} 
--> 
</style> 
<script language="JavaScript"> 
function Insert() 
{ 
document.all.New.insertAdjacentHTML("AfterBegin","<font color=red>-新插入的内容-<font>");
//第一个参数是用来指明位置，第二个参数是要插入的Html内容。 
}//function 
</script> 
</head> 
<body> 
<p><br> 
</p> 
<p id="New" οnclick="Insert()">点击此行蓝色文字将插入文本</p> 
</body> 
</html>

您可以试一下另外三个参数BeforeBegin、BeforeEnd和AfterEnd。insertAdjacentText方法地用法也是类似的。

evangel_z

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS中innerHTML与innerText的用法与区别

用法： test1 test2在JS中可以使用：test.innerHTML:　　也就是从对象的起始位置到终止位置的全部内容,包括Html标签。　　上例中的test.innerHTML的值也就是“test1 test2 ”。test.innerText: 　　从起始位置到终止位置的内容, 但它去除Html标签　　上例中的text.innerTest的
复制链接

扫一扫