首页 > web前端 > html教程 > innerHTML/outerHTML; innerText/outerText; textContent_html/css_WEB-ITnose

innerHTML/outerHTML; innerText/outerText; textContent_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:18:16
原创
1287 人浏览过

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.

    // 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
  • Node.innerText
  •   Non-standard: DO NOT use it on production site.
  • HTMLElement.outerText
  •   Non-standard: DO NOT use it on production site.
  • 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!
  • 来源:php.cn
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板