innerHTML&innerHTML与innerText的区别&outerHTML&innerHTML与html的区别

最新推荐文章于 2023-10-18 22:51:26 发布

diemengxia1380

最新推荐文章于 2023-10-18 22:51:26 发布

阅读量132

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/flyingLcode/p/8053498.html

版权

innerHTML

innerHTML 属性用于设置或返回指定标签之间的 HTML 内容。

语法:HTMLElementObject.innerHTML=text

　　　　Object.innerHTML = "HTML";　　// 设置

　　　　var html = Object.innerHTML;　　// 获取

所有主要浏览器都支持 innerHTML 属性

innerHTML在JS是双向功能：获取对象的内容或向对象插入内容；

举个? ：

1.获取段落p的innerHTML(html内容)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p id="test"><font color="#000">嗨豆壳 www.hi-docs.com</font></p>  
    <input type="button" οnclick="getInnerHTML()" value="点击" />  
    <script type="text/javascript">  
        function getInnerHTML(){  
            alert(document.getElementById("test").innerHTML);  
        }  
        </script>  
</body>
</html>

2.设置段落p的innerHTML(html内容)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p id="test"><font color="#000">嗨豆壳 www.hi-docs.com</font></p>  
    <input type="button" οnclick="setInnerHTML()" value="点击" />  
    <script type="text/javascript">  
        function setInnerHTML(){  
            document.getElementById("test").innerHTML = "<strong>设置标签的html内容</strong>";  
        }  
    </script>  
</body>
</html>

innerHTML与innerText的区别

document 对象中有innerHTML和innerText 两个属性，这两个属性都是获取document对象的文本内容的，这两个属性间有哪些区别呢？

通过几个例子来看一下

<html>  
    <head><title>innerHTML</title></head>  
    <body>  
        <p id="p1">hello world </p>  
        <script>  
            var content = document.getElementById("p1");  
            alert(content.innerHTML);  
            alert(content.innerText)  
        </script>  
    </body>  
</html>

通过IE浏览器打开，弹出内容为 "hello world" 和 "hello world"

通过 Firefox 浏览器打开，弹出内容为 "hello world" 和 "undefined"

通过 chrome 浏览器打开，弹出内容为 "hello world" 和 "hello world"

<html>  
    <head><title>innerHTML</title></head>  
    <body>  
        <div id="d1"><p id="p1">hello world </p></div>  
        <script>  
            var content = document.getElementById("d1");  
            alert(content.innerHTML);  
            alert(content.innerText)  
        </script>  
    </body>  
</html>

通过IE浏览器打开，弹出内容为 hello world 和 hello world

通过 Firefox 浏览器打开，弹出内容为 hello world 和 undefined

通过 chrome 浏览器打开，弹出内容为 hello world 和 hello world

通过上面两个示例，可以看出：

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

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

同时，innerHTML 是所有浏览器都支持的，innerText 是IE浏览器和chrome 浏览器支持的，Firefox浏览器不支持。

其实，innerHTML 是W3C 组织规定的属性；而innerText 属性是IE浏览器自己的属性，不过后来的浏览器部分实现这个属性罢了。

outerHTML属性

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

继续看上面的代码，将alert(content.innerText) 修改为 alert(content.outerHTML)

通过浏览器可以看到弹出框为hello world 和 <divid="d1">hello world</div>

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

<html>  
    <head><title>innerHTML</title></head>  
    <body>  
        <div id="d1"><p id="p1">hello world </p></div>  
        <script>  
            var content = document.getElementById("p1");  
            alert(content.innerHTML.replace(/& lt;.+?>/gim,''));  
        </script>  
    </body>  
</html>

弹出的为去掉了html标签之后的内容，这是个在所有浏览器均可使用的方法。