innerHTML v.s. outerHTML

  • Element.innerHTML

  • Element.outerHTML
    •   Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML
    •   Functionality
      •   Get serialized HTML fragment describling the element and its descendants.
      •   Set : Replace the element with the nodes generated by parsing the content string with parent of the element as the context node for the fragment parsing algorithm.
    •   NOTE
      •   If element has no parent element, set outerHTML will throw DOMException.

        •   e.g. [Chrome Dev Console]  document.documentElement.outerHTML='a';   Uncaught DOMException: Failed to set the 'outerHTML' property on 'Element': This element's parent is of type '#document', which is not an element node.
      •   Considering below code.
        // HTML:
        // <div id="container"><div id="d">This is a div.</div></div> container = document.getElementById("container");
        d = document.getElementById("d");
        console.log(container.firstChild.nodeName); // logs "DIV" d.outerHTML = "<p>This paragraph replaced the original div.</p>";
        console.log(container.firstChild.nodeName); // logs "P" // The #d div is no longer part of the document tree,
        // the new paragraph replaced it.

        While the element will be replaced in the document, the variable whose outerHTML property was set will still hold a reference to the original element!

innerText and outerText

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 4 45 (45) 6 9.6 (probably earlier) 3

textContent v.s innerText

  • Node.textContent

    • Get: different node types gets different result

      •   null: document, notation (use document.documentElement.textContent instead).
      •   text inside the node: CDATA, comment, text node, processing instruction. (nodeValue)
      •   concatenation of children nodes (excluding comment, processing instruction nodes) text: other types node
    • Set: Remove node children and replace it with a text node.
  • Difference from innerText
    •   many... : refer to MDN.
  • Why we still need innerText sometime?
    •   Browser compatibility!

      •   IE has better support for innerText than for textContent. Only IE9+ supports textContent, but IE6+ supports innerText.
    •   Common usage:
      •   set

        t[t.innerText ? 'innerText' : 'textContent'] = v.n
      •  get

        it = currHeaderChildNodes[i].innerText || currHeaderChildNodes[i].textContent;

textContent v.s. innerHTML

  • It's recommand to use textContent!

    • innerHTML parse text as HTML (except "script" element) -> poor performance!
    • innerHTML has security problem!

innerHTML/outerHTML; innerText/outerText; textContent的更多相关文章

  1. innerHTML,outerHTML,innerText,outerText区别以及insertAdjacentHTML()方法

    在需要给文档插入大量的新的HTML标记的情况下,通过多次DOM操作先创建节点再指定它们之间的关系会非常麻烦而且效率不高,相对而言插入标记的方法会更加简单,速度也更快. 插入标记中有这四个属性inner ...

  2. JS魔法堂:被玩坏的innerHTML、innerText、textContent和value属性

    一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它(修正:FF45+已经支持innerText属性),一般情况下我们可以使用textContent来代替,但它两者 ...

  3. [转]被玩坏的innerHTML、innerText、textContent和value属性

    一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它,一般情况下我们可以使用textContent来代替,但它两者是否就能完全等同呢?在坑爹的表单元素(如input ...

  4. innerHTML outerHTML innerText

      迁移时间--2017年10月31日14:52:59 Author:Marydon UpdateTime--2017年1月15日20:33:03innerHTML,outerHTML与innerTe ...

  5. innerHTML,innerText,textContent

    参考理解 https://www.e-learn.cn/content/html/1765240 https://developer.mozilla.org/zh-CN/docs/Web/API/El ...

  6. innerHTML,innertext ,textcontent,write()

    innerhtml属于对象的一个属性,一般用于向已经存在的标签中写入内容,或者读取标签的内容. innertext属于对象的一个属性,一般只能用于写入内容,或者读取内容,不能读取dom 中的标签,且只 ...

  7. JS中innerHTML/outerHTML和innerText/outerText以及value 的区别与使用

    value value:value是表单元素特有的属性,输入输出的是字符串 如下面的例子,获取到的是他们的value值 <input type="text" id=" ...

  8. textContent、innerHTML、innerText、outerText、outerHTML、nodeValue使用场景和区别

    今天要讲的这些属性都可以用来获取某个元素的内容,你可能会觉得不可思议,或是说上一句"丧心病狂"也.但当你看完以下内容后,会发现除outerText无用外,其他的都有各自的使用场景, ...

  9. vue-learning:12 - 2 - 区分:outerHTML - innerTHML - outerText - innerText - textContent

    区分:outerHTML - innerTHML - outerText - innerText - textContent 获取值 <div id="outer"> ...

随机推荐

  1. IEEE 802

    IEEE 802又称为LMSC(LAN /MAN Standards Committee, 局域网/城域网标准委员会), 致力于研究局域网和城域网的物理层和MAC层中定义的服务和协议, 对应OSI网络 ...

  2. Oracle RAC的五大优势及其劣势

    Oracle RAC的五大优势及其劣势 不同的集群产品都有自己的特点,RAC的特点包括如下几点: 双机并行.RAC是一种并行模式,并不是传统的主备模式.也就是说,RAC集群的所有成员都可以同时接收客户 ...

  3. 使用Maven构建Web项目的目录结构

    1.Web项目的目录结构     基于Java的Web项目,标准的打包方式是WAR.与JAR比较,包含更多的内容,比如JSP文件.Servlet.Java类.web.xml配置文件.依赖JAR包.静态 ...

  4. css两句话搞定漂亮表格样式

    CSS代码: table { background-color:#c0de98; width:500px; height:100px; } td { background-color:#ffffff; ...

  5. [QT]构建正则表达式测试

    正则表达式是个强大的东西 暂时先记录一个用法: QString str = "Peak memory: KEY s"; QString data = "Peak memo ...

  6. SQL Server阻止了对组件xp_cmdshell过程的解决方案

    使用SQL tools连接sqlserver时候出现以下问题: SQL Server阻止了对组件xp_cmdshell过程的解决方案错误描述:SQL Server阻止了对组件‘xp_cmdshell’ ...

  7. Transaction: atomicity, consistency, separability, persistence

    Transaction: atomicity, consistency, separability, persistence http://langgufu.iteye.com/blog/143440 ...

  8. openStack使用宿主机监控

    10个vm 平稳运行 top 数值

  9. sonarQube 管理

    sonarQube是一个管理代码质量的开放平台,它可以从七个维度检测和扫描代码质量 参考百度文库:http://wenku.baidu.com/view/cba28af9b90d6c85ed3ac67 ...

  10. conv2用法

    1.用法 C=conv2(A,B,shape);        %卷积滤波 A:输入图像,B:卷积核      假设输入图像A大小为ma x na,卷积核B大小为mb x nb,则      当sha ...