innerHTML outerHTML innerText
迁移时间--2017年10月31日14:52:59
Author:Marydon
UpdateTime--2017年1月15日20:33:03
innerHTML,outerHTML与innerText
示例:
<div id="test">
测试<br/>
<input type="text"/>
<input type="button"/>
<div>innerHTML与outerHTML的区别</div>
</div>
innerHTML--取的是标签体内的所有内容
如:
window.onload = function() {
document.getElementById("test").innerHTML;
//显示的所有内容
/*测试<br/>
<input type="text"/>
<input type="button"/>
<div>innerHTML与outerHTML的区别</div>*/
}
用法:
1.取值
var html = document.getElementById("test").innerHTML;
2.赋值(覆盖掉原来的内容)
document.getElementById("test").innerHTML = "这里是替换后的内容";
如:
document.getElementById("test").innerHTML = "<font color='red'>${model.data.forgid}</font>";
3.给当前标签体内添加或追加子标签或内容;
如:
document.getElementById("test").innerHTML += "<font color='red'>${model.data.forgid}</font>";
outerHTML--根据标签本身的引用来获取标签自身的html标签(即:标签体本身+标签体里面的内容)
window.onload = function() {
document.getElementById("test").outerHTML;
//显示的是该标签体
/*<div id="test">
测试<br/>
<input type="text"/>
<input type="button"/>
<div>innerHTML与outerHTML的区别</div>
</div>*/
}
用法:
1.取值
var html = document.getElementById("test").outerHTML;
2.给指定元素的后面添加同级元素或内容;
如:
document.getElementById("test").outerHTML += "<font color='red'>${model.data.forgid}</font>";
/**
* 不兼容outerHTML的解决办法
*/
if(!document.body.outerHTML && typeof(HTMLElement) != "undefined") {
HTMLElement.prototype.__defineGetter__("outerHTML", function() {
var a = this.attributes,
str = "<" + this.tagName,
i = 0;
for(; i < a.length; i++)
if(a[i].specified)
str += " " + a[i].name + '="' + a[i].value + '"';
if(!this.canHaveChildren)
return str + " />";
return str + ">" + this.innerHTML + "</" + this.tagName + ">";
});
HTMLElement.prototype.__defineSetter__("outerHTML", function(s) {
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var df = r.createContextualFragment(s);
this.parentNode.replaceChild(df, this);
return s;
});
HTMLElement.prototype.__defineGetter__("canHaveChildren", function() {
return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());
});
}
innerText--取的是标签体内的所有文本内容
如:
window.onload = function() {
document.getElementById("test").innerText;
//显示所有的文本内容
/*测试
innerHTML与innerText的区别*/
}
用法:同innerHTML
innerText与innerHTML的区别
区别1:
取值(上面例子)
区别2:赋值
$get("FORGNAME_SPAN").innerText= "『<font color=red>" + json.FORGNAME + "</font>』下属医疗机构相关信息";
显示结果:
『<font color=red>中华人民共和国</font>』下属医疗机构相关信息
$get("FORGNAME_SPAN").innerHTML= "『<font color=red>" + json.FORGNAME + "</font>』下属医疗机构相关信息";
显示结果:
『中华人民共和国』下属医疗机构相关信息
innerHTML outerHTML innerText的更多相关文章
- innerHTML,outerHTML,innerText,outerText区别以及insertAdjacentHTML()方法
在需要给文档插入大量的新的HTML标记的情况下,通过多次DOM操作先创建节点再指定它们之间的关系会非常麻烦而且效率不高,相对而言插入标记的方法会更加简单,速度也更快. 插入标记中有这四个属性inner ...
- innerHTML/outerHTML; innerText/outerText; textContent
innerHTML v.s. outerHTML Element.innerHTML Reference: https://developer.mozilla.org/en-US/docs/Web/A ...
- (转)innerHTML、innerText和outerHTML、outerText的区别
原文:http://walsh.iteye.com/blog/261966 innerHTML.innerText和outerHTML.outerText的区别 博客分类: CSS/ ...
- textContent、innerHTML、innerText、outerText、outerHTML、nodeValue使用场景和区别
今天要讲的这些属性都可以用来获取某个元素的内容,你可能会觉得不可思议,或是说上一句"丧心病狂"也.但当你看完以下内容后,会发现除outerText无用外,其他的都有各自的使用场景, ...
- 测试开发技术:DOM中 innerHTML、innerText、outerHTML、outerText的区别
测试开发技术:DOM中 innerHTML.innerText.outerHTML.outerText的区别 我们在做web自动化的过程中通过dom处理web页面元素,那么你就要了解innerHT ...
- innerHTML、innerText和outerHTML、outerText的区别
区别描述如下: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内 ...
- DOM中的outerHTML,innerHTML,outerText,innerText的区别
--转自http://blog.163.com/yw_0721/blog/static/7164579720102932157759/ 简单的说innerHTML和outerHTML.innerTex ...
- JS中innerHTML和innerText,outerHTML和outerText
innerHTML 声明了元素含有的HTML文本,不包括元素本身的开始标记和结束标记 innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器(现在也适应chrome浏览器 ...
- JS中innerHTML/outerHTML和innerText/outerText以及value 的区别与使用
value value:value是表单元素特有的属性,输入输出的是字符串 如下面的例子,获取到的是他们的value值 <input type="text" id=" ...
随机推荐
- pg 创建自增id
CREATE SEQUENCE original_site_id_seq START WITH 1 INCREMENT BY 1 NO MINVALUE NO MAXVALUE CACHE 1; 先创 ...
- 【Luogu】P2219修筑绿化带(单调队列)
题目链接 这题各种边界判断恶心死人 就是单调队列在每行求出最小的.能装进A*B方块里的花坛 然后再在刚刚求出的那个东西里面跑一遍竖着的单调队列 然后……边界调了一小时 做完这题我深刻地感觉到我又强了 ...
- hdoj--2082<母函数>
题目链接 : http://acm.hdu.edu.cn/showproblem.php?pid=2082题目描述:26个字母各有价值,分别是1到26:给出每个字母的个数,求单词价值不超过50 的单词 ...
- ——CentOS 7 安装SQL Server2019
环境准备 不废话,先把研究环境搭建起来.由于某些原因(晚点再说),本系列首先使用CentOS 7作为操作系统.官方指引中支持的Linux平台及文件系统中并没有指出CentOS,但是作为与Red Ha ...
- BZOJ 4555 [Tjoi2016&Heoi2016]求和 ——分治 NTT 多项式求逆
不想多说了,看网上的题解吧,我大概说下思路. 首先考察Stirling的意义,然后求出递推式,变成卷积的形式. 然后发现贡献是一定的,我们可以分治+NTT. 也可以直接求逆(我不会啊啊啊啊啊) #in ...
- [luoguP2770] 航空路线问题(最小费用最大流)
传送门 模型 求最长两条不相交路径,用最大费用最大流解决. 实现 为了限制经过次数,将每个点i拆成xi,yi. 1.从xi向yi连一条容量为1,费用为1的有向边(1<i<N), 2.从x1 ...
- linux tomcat安装(二)
安装步骤: 1.下载 Tomcat 下载 apache-tomcat-7.0.69.tar.gz(官方网址:http://tomcat.apache.org/) 2.解压 Tomcat 解压 apac ...
- 表单编码 appliation/x-www-form-urlencoded 与 multipart/form-data 的区别
当表单使用POST方法时,表单数据提交到服务器端之前有两种编码类型可供选择.默认编码类型为 application/x-www-form-urlencoded,此时所有非字母数字类型的字符都需要转换为 ...
- POJ3067 Japan
Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 26270 Accepted: 7132 Description Japa ...
- HDU 6231 (二分+双指针)
题意:给一个长度为n的数组,问在由这个数组的所有的区间第k小组成B数组中,第m大元素是多少 解法:这题较难的地方在于转化思维.如果去求所有区间的第k小,最坏复杂度是O(n*n)肯定超时. 这题正确的解 ...