JS与jQuery中html-与-text方法的区别

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，元素自身会被删除。
3.jQuery中的html()和text()方法分别返回的是元素的innerHTML和innerText。要想获取元素的outerHTML和outerText需要采用prop或者attr获取元素的属性