innerHTML,innerText和outerHTML,outerText的区别
发布在前端路上2017年6月27日view:553前端开发DOM
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

他们的作用分别是:

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

比较:

  • innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析,而innerText与outerText则不会。
  • 在设置时,innerHTML与innerText仅设置标签内的文本,而outerHTML与outerText设置包括标签在内的文本。

举例:

假如页面里有这样一个标签,<div id="test">测试效果</div>,我们分别执行这四种操作的结果是:

//执行:innerHTML
test.innerHTML="<i>refined-x.com</i>";
//结果:<div id="test"><i>refined-x.com</i></div>

//执行:innerText
test.innerText="<i>refined-x.com</i>";
//结果:<div id="test"><i>refined-x.com</i></div>

//执行:outerHTML
test.outerHTML="<i>refined-x.com</i>";
//结果:<i>refined-x.com</i>

//执行:outerText
test.outerText="<i>refined-x.com</i>";
//结果:"<i>refined-x.com</i>"

评论
发表评论
暂无评论
WRITTEN BY
雅X共赏
前端路上:www.refined-x.com
TA的新浪微博
PUBLISHED IN
前端路上

前端路上,与你同行。

我的收藏