首页 > 代码库 > innerHTML与innerText的PK

innerHTML与innerText的PK

2024-08-29 18:40:28   220人阅读

一、innerText属性用来定义对象所要输出的文本，在本例中innerText把对象it中的文本“您喜欢看微微一笑很倾城吗？”变成了“超级喜欢！”（语句it.innerText="超级喜欢！"）。而对对象ih的改变用了innerHTML属性，它除了有innerText的作用外，还可改变对象ih内部的HTML语句，于是它把文本变成了“肖奈!”，而且文本输出改成了斜体（<i></i>）并加粗（<b></b>），即语句ih.innerHTML="<i><b>肖奈!</b></i>"。

<!DOCTYPE HTML PUBLIC "-//W3C//itD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.itd">
<html>
<head>
    <meta charset="UTF-8">
    <title>innerText和innerHTML用法实例</title>
</head>
<body>
<p><span style="color:red;">请点击下边的文字……</span>
<ul>
    <li id="it" onclick="changeText()">您喜欢看微微一笑很倾城吗? </li>
    <li id="ih" onclick="changeHtml()">您叫什么名字? </li>
    <li onclick="back()">恢复原样! </li>
</ul>
</body>
<script type="text/javascript">
    function changeText() {
        it.innerText="超级喜欢!";
    }//function
    function changeHtml() {
        ih.innerHTML="<i><b>肖奈!</b></i>";
    }//function
    function back() {
        it.innerText="您喜欢看微微一笑很倾城吗? ";
        ih.innerHTML="您叫什么名字?";
    }
</script>
</html>

二、下例的效果是先在文本框中输入文本，然后按“输出文本”的按钮，接着网页便会自动输出您所输入的文本

<!DOCTYPE HTML PUBLIC "-//W3C//itD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.itd">
<html>
<head>
    <meta charset="UTF-8">
    <title>用innerText和innerHTML制作动态网页</title>
</head>
<body>
<form name="frm">
    <p>
        <span style="color:red;">请在文本框中输入文字:</span><br/><br/>
        <label>第一个文本框:</label><input type="text" name="txt" size="50"/><br/><br/>
        <label>第二个文本框:</label> <input type="text" name="txt2" size="20"/>
        <br><br/>
        <input type="button" value=http://www.mamicode.com/"输出two文本" name="B1" style="color:blue;" onclick="OutputText()">
    </p>
</form>
<p id="Output">
    在此处输出文本：
</p>
</body>
<script type="text/javascript">
    function OutputText() {
        if(frm.txt2.text!="") {
            Output.innerHTML="在此处输出文本：<b>"+frm.txt2.value+"</b>";} //Output为一对象。
        else {
            Output.innerText="在此处输出文本：";}
//        if(frm.txt2!="") {
//            Output.innerHTML="在此处输出文本：<b>"+frm.txt2.value+"</b>";} //Output为一对象。
//        else {
//            Output.innerText="在此处输出文本：";}
//        if(frm.txt2.value!="") {
//            Output.innerHTML="在此处输出文本：<b>"+frm.txt2.value+"</b>";} //Output为一对象。
//        else {
//            Output.innerText="在此处输出文本：";}
    }
</script>
</html>

总结：

innerText和innerHTML获取元素的内容。如果元素只包含文本，那么innerText和innerHTML返回相同的值。但是，如果同时包含文本和其他元素，innerText将只返回文本的表示，而innerHTML，将返回所有元素和文本的HTML代码。下面的表格列出了根据特定代码innerText和innerHTML返回的不同值。

 

代码 innerText innerHTML
<div>Hello world</div> "Hello world" "Hello world"
<div><b>Hello</b>world</div> "Hello world" "<b>Hello</b>world"
<div><span></span></div> "" "<span></span>"

 


     最后，通过将innerText赋值给它自身，表示从指定的元素中删除所有的HTML标签。
     oDiv.innerText = oDiv.innerText;

 补充：innerText、innerHTML、outText、outHTML终极PK

一、功能介绍：

innerHTML 设置或获取位于对象起始和结束标签内的 HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本 

二、示例参考

 

<!DOCTYPE HTML PUBLIC "-//W3C//itD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.itd">
<html>
<head>
<meta charset="UTF-8">
<title>innerText、innerHTML、outText、outHTML</title>
</head>
<body>
<p style="color:lawngreen;" >请点击下面列表变身：</p>
<ul> 
    <li id="test_id1" onclick="innerHTMLDemo()">innerHTML效果.</li> 
    <li id="test_id2" onclick="innerTextDemo()">innerText效果.</li> 
    <li id="test_id3" onclick="outerHTMLDemo()">outerHTML效果.</li> 
    <li id="test_id4" onclick="outerTextDemo()">outerText效果.</li> 
</ul>
</body>
    <script language="JavaScript">
    //.innerHTML
    function innerHTMLDemo() {
        test_id1.innerHTML="<i><b>设置或获取位于对象起始和结束标签内的 HTML.</b></i>";
    }
    //.innerText
    function innerTextDemo() {
        test_id2.innerText="<i><b>设置或获取位于对象起始和结束标签内的文本.</b></i>";
    }
    //.outerHTML
    function outerHTMLDemo() {
        test_id3.outerHTML="<i><b>设置或获取对象及其内容的 HTML 形式.</b></i>";
    }
    //.outerText
    function outerTextDemo() {
        test_id4.outerText="<i><b>设置(包括标签)或获取(不包括标签)对象的文本.</b></i>";
    }
    </script>
    </html>

 

三、不同之处:
简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于：
1）、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。
2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。
技术分享

特别说明：
　　innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签。

 

innerHTML与innerText的PK


联系
我们