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标签之后的内容，这是个在所有浏览器均可使用的方法。

InnerHtml() 与html( )的区别

在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。

如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。

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

转载于:https://www.cnblogs.com/flyingLcode/p/8053498.html

innerHTMLinnerHTML与innerText的区别outerHTMLinnerHTML与html的区别相关推荐

innerText和innerHTML区别 target和this的区别
innerText和innerHTML区别 target和this的区别 1 innerText和innerHTML区别 innerText 和 innerHTML 是 JavaScript 中常用的 ...
r语言和python-Python和R语言的区别_Python与R的区别和联系
Python和R语言的区别_Python与R的区别和联系可能问这个问题会很无脑,但是我还没有深入接触过Python,只是用过R语言.谁能帮我解答一下,这两者的主要区别呢?是否存在代替关系呢? 精彩解 ...
java中的异常种类和区别以及处理机制和区别
java中的异常种类和区别以及处理机制和区别按照异常需要处理的时机分为编译时异常(也叫强制性异常)也叫 CheckedException 和运行时异常(也叫非强制性异常)也叫 RuntimeExce ...
SparkMapReduce的区别、多线程多进程的区别
Spark&MapReduce的区别.多线程&多进程的区别 1.spark与hadoop区别: 2.Spark多线程运行, MR多进程运行 3.MR存在的问题: 4.线程和进程的区别: ...
现货跟期货有什么区别（现货和期货交易区别）
现货和期货的区别? 期货交易和现货交易的区别如下: 期货交易与现货交易有相同的地方,如都是一种交易方式.都是真正意义上的买卖.涉及商品所有权的转移等,不同的地方有以下几点: (1)买卖的直接对象不同. ...
YV12和I420的区别 yuv420和yuv420p的区别
YV12和I420的区别 YV12和I420的区别一般来说,直接采集到的视频数据是RGB24的格式,RGB24一帧的大小size＝width×heigth×3 Bit,RGB32的 ...
C#【中级篇】volatile关键字测试-在C#无区别，在Java有区别
文章目录问题来源: 测试代码1(测试有无volatile的区别,在C#里无区别): 测试代码2:(ChangeMaker不延时,ChangeListener跟不上变化) 测试代码3:(ChangeM ...
Element-ui和Element-Plus的区别_Element2和Element3的区别
Element-ui和Element-Plus的区别_Element2和Element3的区别一.定义区别 Element-UI对应Element2:基本不支持手机版 Element,一套为开发者. ...
计算机控制和dcs控制的区别,dcs与plc有什么区别?dcs和plc的区别
dcs与plc有什么区别?dcs和plc的区别在自动化领域,DCS和PLC是两个完全不同,又有些千丝万缕联系的概念,两者都是计算机技术和工业控制技术相结合的产物,我想从技术特点,发展方向等几个方面进 ...
原生js和jquery 遍历数组区别（forEach和each区别）
原生js和jquery 遍历数组区别(forEach和each区别) <script>var arr=[1,3,6,8,4];var obj={0:1,1:3,2:6,3:8,4:4};a ...

innerHTMLinnerHTML与innerText的区别outerHTMLinnerHTML与html的区别