innerHTML/outerHTML; innerText/outerText; textContent
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!
- If element has no parent element, set outerHTML will throw DOMException.
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.
- Get: different node types gets different result
- 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
- set
- Browser compatibility!
- get
it = currHeaderChildNodes[i].innerText || currHeaderChildNodes[i].textContent;
- get
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的更多相关文章
- innerHTML,outerHTML,innerText,outerText区别以及insertAdjacentHTML()方法
在需要给文档插入大量的新的HTML标记的情况下,通过多次DOM操作先创建节点再指定它们之间的关系会非常麻烦而且效率不高,相对而言插入标记的方法会更加简单,速度也更快. 插入标记中有这四个属性inner ...
- JS魔法堂:被玩坏的innerHTML、innerText、textContent和value属性
一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它(修正:FF45+已经支持innerText属性),一般情况下我们可以使用textContent来代替,但它两者 ...
- [转]被玩坏的innerHTML、innerText、textContent和value属性
一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它,一般情况下我们可以使用textContent来代替,但它两者是否就能完全等同呢?在坑爹的表单元素(如input ...
- innerHTML outerHTML innerText
迁移时间--2017年10月31日14:52:59 Author:Marydon UpdateTime--2017年1月15日20:33:03innerHTML,outerHTML与innerTe ...
- innerHTML,innerText,textContent
参考理解 https://www.e-learn.cn/content/html/1765240 https://developer.mozilla.org/zh-CN/docs/Web/API/El ...
- innerHTML,innertext ,textcontent,write()
innerhtml属于对象的一个属性,一般用于向已经存在的标签中写入内容,或者读取标签的内容. innertext属于对象的一个属性,一般只能用于写入内容,或者读取内容,不能读取dom 中的标签,且只 ...
- JS中innerHTML/outerHTML和innerText/outerText以及value 的区别与使用
value value:value是表单元素特有的属性,输入输出的是字符串 如下面的例子,获取到的是他们的value值 <input type="text" id=" ...
- textContent、innerHTML、innerText、outerText、outerHTML、nodeValue使用场景和区别
今天要讲的这些属性都可以用来获取某个元素的内容,你可能会觉得不可思议,或是说上一句"丧心病狂"也.但当你看完以下内容后,会发现除outerText无用外,其他的都有各自的使用场景, ...
- vue-learning:12 - 2 - 区分:outerHTML - innerTHML - outerText - innerText - textContent
区分:outerHTML - innerTHML - outerText - innerText - textContent 获取值 <div id="outer"> ...
随机推荐
- C++ Prime:decltype类型指示符
decltype作用是选择并返回操作数的数据类型. decltype(f()) sum = x; // sum的类型就是函数f的返回类型 如果decltype使用的表达式是一个变量,则decltype ...
- iOS 多线程学习笔记 —— NSOperation
本文复制.参考自文章:iOS多线程编程之NSOperation和NSOperationQueue的使用 ,主要为了加强个人对知识的理解和记忆,不做他用.原作者声明: 著作权声明:本文由http://b ...
- HDOJ 1312题Red and Black
Red and Black Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...
- UILabel的使用方法
UILabel 就是一个显示文字的控件,可以设置文字的各种属性. 构造方法: //通过设置Label的边框来初始化UILabel labelOfSlider = [[UILabelal ...
- 元素重叠及position定位的z-index顺序
元素位置重叠的背景常识 (x)html文档中的元素默认处于普通流(normal flow)中,也就是说其顺序由元素在文档中的先后位置决定,此时一般不会产生重叠(但指定负边距可能产生重叠).当我们用cs ...
- 数学常数e的含义
转载: http://www.ruanyifeng.com/blog/2011/07/mathematical_constant_e.html 作者: 阮一峰 日期: 2011年7月 9日 1. ...
- 错误137(net::ERR_NAME_RESOLUTION_FAILED):未知错误的解决办法
现象:之前遇到一些新闻网站打不开的情况...而让异地的朋友打开却能打开.. 解决①:配置dns ,因为公司内部的网络是桥接的 我们dns服务器默认是192.168.1.1 ,dns被封锁,直接导致一些 ...
- 创建oracle 密码文件
orapwd file='$ORACLE_HOME/dbs/oratest' password=oracle entries=5 force=y; 说明:●FILE参数指定口令文件存放的全路径及文件名 ...
- java poi操作excel 添加 锁定单元格保护
Excel的book保护是很常用的,主要是不想让别人修改Excel的时候用.这样能够避免恶意随便修改数据,提高数据的可信度. 下面介绍JAVA POI来实现设置book保护: 使用HSSFSheet类 ...
- C#中的线程(上)-入门 分类: C# 线程 2015-03-09 10:56 53人阅读 评论(0) 收藏
1. 概述与概念 C#支持通过多线程并行地执行代码,一个线程有它独立的执行路径,能够与其它的线程同时地运行.一个C#程序开始于一个单线程,这个单线程是被CLR和操作系统(也称为"主线 ...