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

所有的实例均用下面的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，元素自身会被删除。

 

3.jQuery中的html()和text()方法分别返回的是元素的innerHTML和innerText。要想获取元素的outerHTML和outerText需要采用prop或者attr获取元素的属性