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"> ...
随机推荐
- IEEE 802
IEEE 802又称为LMSC(LAN /MAN Standards Committee, 局域网/城域网标准委员会), 致力于研究局域网和城域网的物理层和MAC层中定义的服务和协议, 对应OSI网络 ...
- Oracle RAC的五大优势及其劣势
Oracle RAC的五大优势及其劣势 不同的集群产品都有自己的特点,RAC的特点包括如下几点: 双机并行.RAC是一种并行模式,并不是传统的主备模式.也就是说,RAC集群的所有成员都可以同时接收客户 ...
- 使用Maven构建Web项目的目录结构
1.Web项目的目录结构 基于Java的Web项目,标准的打包方式是WAR.与JAR比较,包含更多的内容,比如JSP文件.Servlet.Java类.web.xml配置文件.依赖JAR包.静态 ...
- css两句话搞定漂亮表格样式
CSS代码: table { background-color:#c0de98; width:500px; height:100px; } td { background-color:#ffffff; ...
- [QT]构建正则表达式测试
正则表达式是个强大的东西 暂时先记录一个用法: QString str = "Peak memory: KEY s"; QString data = "Peak memo ...
- SQL Server阻止了对组件xp_cmdshell过程的解决方案
使用SQL tools连接sqlserver时候出现以下问题: SQL Server阻止了对组件xp_cmdshell过程的解决方案错误描述:SQL Server阻止了对组件‘xp_cmdshell’ ...
- Transaction: atomicity, consistency, separability, persistence
Transaction: atomicity, consistency, separability, persistence http://langgufu.iteye.com/blog/143440 ...
- openStack使用宿主机监控
10个vm 平稳运行 top 数值
- sonarQube 管理
sonarQube是一个管理代码质量的开放平台,它可以从七个维度检测和扫描代码质量 参考百度文库:http://wenku.baidu.com/view/cba28af9b90d6c85ed3ac67 ...
- conv2用法
1.用法 C=conv2(A,B,shape); %卷积滤波 A:输入图像,B:卷积核 假设输入图像A大小为ma x na,卷积核B大小为mb x nb,则 当sha ...