普陀总校  北桥教学点  颛桥教学点  泗泾教学点  | 设为首页 | 加入收藏 | 官方微信
内威培训
打造“培训+就业”一站式服务品牌!
  • Web前端工程师
  • 电脑艺术设计师
  • 网页设计制作员
  • Java软件开发工程师
banner1

首页>>学员天地

innerText和innerHTML区别
编辑:Simon  阅读:1843次  发布:14-03-25
    尽管DOM带来了动态修改文档的能力,但对开发人员来说,这还不够。IE4.0为所有的元素引入了两个特性,以更方便的进行文档操作,这两个特性是innerText和innerHTML。

    其中innerText特性用来修改起始标签和结束标签之间的文本的。例如,假设有个空的<div/>元素,希望将其变成<div>New text for the div.</div>。
    用DOM实现时,要这么做:
    oDiv.appendChild(document.createTextNode("New text for the div."));
    这段代码并不难读,但是很冗长。
   
    如果使用innerText,只要这么做:
    oDiv.innerText = "New text for the div.";
    使用innerText,代码更加简洁,并且更容易理解。另外,innerText会自动将小于号、大于号、引号和&符号进行HTML编码,所有是毫不需当心特殊字符:
    oDiv.innerText = "New text for the <div/>.";
    这一行代码的执行结果是<div>New text for the &lt;div/&gt;.</div>。

    但如何一定要在元素中包含HTML标签呢?这就是innerHTML所要解决的问题。应用innerHTML特性,可以直接给元素分配HTML字符串,而不需考虑使用DOM方法来创建元素。例如,假设一个空<div/>要变成<div><strong>Hello</strong><em>World</em></div>。使用DOM,要用下面的代码:
    var oStrong = document.createElement("strong’);
    oStrong.appendChild(document.createTextNode("hello"));
    var oEm = document.createElement("em");
    oEm.appendChild(document.createTextNode("World"));
    oDiv.appendChild(oStrong);
    oDiv.appendChild(document.createTextNode(""));
    oDiv.appendChild(oEm);
    而使用innerHTML,代码就变成:
    oDiv.innerHTML = "<strong>Hello</strong><em>World</em>";
    七行代码一下就变成一行,这就是innerHML的威力!

    还可以使用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;

上一篇: CSS实现文本两端对齐效果   下一篇: 解决span float:right不能右对齐而是换行显示
网络大专、自考本科,学历轻松拿!
©2016-2020 万博体育APP 版权所有
普陀区武宁路1500号中楼2-3层(邮编:200062)
咨询:021-62434966  合作:021-13371929650  就业:021-62434966  传真:021-52662428  电邮:service@snetway.com
《中华人民共和国电信与信息服务业务》经营许可证沪ICP备15002602号