所有的实例均用下面的html
<div id="id0">
<div id="id1">
直接text
<p>
<span>文本内容</span>
<input value="111222" type="text" />
</p>
</div>
</div>
==================JavaScript中的研究=============
1.html的研究(html会返回html标签，不会解析标签)
1.获取值
1. innerHTML:
从对象的起始位置到终止位置的全部内容,不包括Html标签自身。
2. outerHTML:
除了包含innerHTML的全部内容外, 还包含对象标签本身
+ function() {
console.log(document.getElementById("id1").innerHTML)
console.log(document.getElementById("id1").outerHTML)
}();结果:
2.修改值
innerHTML修改只是修改自己的内部元素，
outerHTML会将元素自身也修改掉。
+ function() {
document.getElementById("id1").innerHTML="<p>空了</p>"
console.log(document.getElementById("id0").innerHTML)
document.getElementById("id1").outerHTML="<p>空了</p>"
console.log(document.getElementById("id0").innerHTML)
}();结果:
2.text的研究(text会返回text内容，会解析html标签)
除了作用范围扩大到了包含 调用它的节点之外，outerText 与innerText 基本上没有多大区别。在读取文本值时，outerText 与 innerText 的结果完全一样。但在写模式下，outerText 就完全不同了：outerText 不只是替换调用它的元素的子节点，而是会替换整个元素（包括子节点）。
1.获取元素的值
+ function() {
console.log(document.getElementById("id1").innerText)
console.log(document.getElementById("id1").outerText)
}();结果:
2.设置元素的值
+ function() {
document.getElementById("id1").innerText = "innerText";
console.log(document.getElementById("id1").innerText)
document.getElementById("id1").outerText = "outerText";
console.log(document.getElementById("id1").outerText)
}();结果:
本质上，新的文本节点会完全取代调用 outerText 的元素。此后，该元素就从文档中被删除，无法访问。
+ function() {
document.getElementById("id1").innerText = "innerText";
console.log(document.getElementById("id0").outerHTML)
document.getElementById("id1").outerText = "outerText";
console.log(document.getElementById("id0").outerHTML)
}();结果:
==========jQuery中的研究===============
jQuery中提供了html()方法和text()方法，带参数是改变值，不带参数是获取元素的值。html()会返回标签，而text()会解析标签。如下:
通过查看jQuery的源码发现html()操作的是元素的innerHTML()。
1.html([val])方法:
(1)不带参数的html获取值(返回的是不包括自己的元素，也就是javascript的innerHTML属性)
+ function() {
console.log($("#id1").html()))
}();结果:
如果返回包含元素的标签可以用获取元素属性的方法获取：(jQuery获取outerHTML)
+ function() {
console.log($("#id1").prop("outerHTML"))
}();结果:
也可以通过扩展jQuery的函数实现获取outerHTML的方法:
jQuery.fn.outerHTML = function(s) {
return s
? this.before(s).remove()
: jQuery("<p>").append(this.eq(0).clone()).html();
};测试代码:
+ function() {
console.log($("#id0").outerHTML());
}();(2)修改元素的属性 (html()只会在标签内部修改值)
+ function() {
$("#id1").html("<p>这是新内容</p>");
console.log($("#id0").html())
$("#id1").prop("outerHTML","<p>这是新内容</p>");
console.log($("#id0").html())
}();结果:
2.text([val])方法:
1.text获取元素属性
在上面我们明白在innerText和outerText的时候值是一样的，没有多大区别，所以在这里简单获取。
+ function() {
console.log($("#id1").text())
console.log($("#id1").prop("outerText"))
}();结果:
2.jQuery修改元素的text(innerText不影响元素自身，outerText会删除元素自身)
+ function() {
$("#id1").text("新的text")
console.log($("#id0").html())
$("#id1").prop("outerText", "新的outerText")
console.log($("#id0").html())
}();结果:
总结:
0.html会返回带标签的内容，也就是不会解析html，会将html标签当作字符串返回
text只返回元素开闭标签之间的内容，会解析html元素。
1.innerHTML和outerHTML区别
innerHTML和outerHTML会将html标签也返回来，innerHTML只返回其子元素，而outerHTML会返回包括自己的元素。
采用等号设值的时候innerHTML只会改变其子元素内容。而outerHTML相当于将包括自己在内的标签替换为新的标签。
2.innerText和outerText的区别
在获取值的时候两者没有任何区别，都是获取内部包含的两个标签中的text
在设置值的时候innerText是将其内部的text设为新的值，不会影响标签自身；outerText相当于将元素自身替换为的text，元素自身会被删除。