innerHTML v.s. outerHTML

• Element.innerHTML
  • 　　Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
  • 　　Functionality
    • 　　Get serialized HTML code describing its descendants.
    • 　　Set : Remove all the children, parse the content string and assign the resulting nodes as the children of the element. 
• 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.
      

      <span style="color: #008000;">//</span><span style="color: #008000;"> HTML:</span><span style="color: #008000;">
      //</span><span style="color: #008000;"> <div id="container"><div id="d">This is a div.</div></div></span>
      <span style="color: #000000;">
      container </span>= document.getElementById("container"<span style="color: #000000;">);
      d </span>= document.getElementById("d"<span style="color: #000000;">);
      console.log(container.firstChild.nodeName); </span><span style="color: #008000;">//</span><span style="color: #008000;"> logs "DIV"</span>
      <span style="color: #000000;">
      d.outerHTML </span>= "<p>this paragraph replaced the original div.</p>"<span style="color: #000000;">;
      console.log(container.firstChild.nodeName); </span><span style="color: #008000;">//</span><span style="color: #008000;"> logs "P"</span>
      
      <span style="color: #008000;">//</span><span style="color: #008000;"> The #d div is no longer part of the document tree,</span><span style="color: #008000;">
      //</span><span style="color: #008000;"> the new paragraph replaced it.</span>

      登录后复制

      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

• Node.innerText
  • 　　Non-standard: DO NOT use it on production site.
• HTMLElement.outerText
  • 　　Non-standard: DO NOT use it on production site.

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

      登录后复制

       

      立即学习“前端免费学习笔记（深入）”；

      

      故事AI绘图神器

      文本生成图文视频的AI工具，无需配音，无需剪辑，快速成片，角色固定。

      77

      查看详情

立即学习“前端免费学习笔记（深入）”；

• • •  　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!