本文共 1741 字,大约阅读时间需要 5 分钟。
innerHTML在JS是双向功能:获取对象的内容 或 向对象插入内容;
如:<div id="aa">这是内容</div>
我们可以通过 document.getElementById(‘aa’).innerHTML
来获取id为aa的对象的内嵌内容;
document.getElementById(‘abc’).innerHTML=’这是被插入的内容’;
这样就能向id为abc的对象插入内容。 实例: 嗨豆壳 www.hi-docs.com
嗨豆壳 www.hi-docs.com
document 对象中有innerHTML和innerText 两个属性, 这两个属性都是获取document对象的文本内容的,这两个属性间有哪些区别呢?通过几个例子来看一下。
innerHTML hello world
通过IE浏览器打开,弹出内容为 “hello world” 和 “hello world”
通过 Firefox 浏览器打开,弹出内容为 “hello world” 和 “undefined”
通过 chrome 浏览器打开,弹出内容为 “hello world” 和 “hello world”
innerHTML hello world
通过IE浏览器打开,弹出内容为
<p id="p1">hello world </p>
和 hello world通过 Firefox 浏览器打开,弹出内容为
<p id="p1">hello world </p>
和 undefined通过 chrome 浏览器打开,弹出内容为
<p id="p1">hello world </p>
和 hello world
通过上面两个示例,可以看出:
说到innerHTML,顺便说一下跟innerHTML相对的outerHTML属性。
继续看上面的代码,将alert(content.innerText)
修改为 alert(content.outerHTML)
通过浏览器可以看到弹出框为<p id="p1">hello world </p>
和 <divid="d1"><p id="p1">hello world</p></div>
outerHTML指的是除了包含innerHTML的全部内容外, 还包含对象标签本身。
总结说明
innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器(现在也适应chrome浏览器),因此,尽可能地去使用
innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:
innerHTML hello world
弹出的为去掉了html标签之后的内容,这是个在所有浏览器均可使用的方法。
转载地址:http://telbi.baihongyu.com/