jQuery中.html()方法的工作原理

本着知其然知其所以然的态度，我们这次从源码分析一下 element.html() 的工作原理，为什么 innerHTML 不能使其中的脚本执行，而 jQuery 的 html() 却可以，而 zepto.js 的只能执行内联脚本却不能加载外部脚本。

我们使用 jQuery 3.1.0 和 Zepto.js 1.2.0 的源码进行分析

jQuery Github

Zepto.js Github

jQuery

首先看看 html() 方法的主入口：

01
// jQuery/src/manipulation.js
02
 
03
html: function( value ) {
04
    return access( this, function( value ) {
05
        var elem = this[ 0 ] || {},
06
            i = 0,
07
            l = this.length;
08
 
09
        if ( value === undefined && elem.nodeType === 1 ) {
10
            return elem.innerHTML;
11
        }
12
 
13
        // See if we can take a shortcut and just use innerHTML
14
        if ( typeof value === "string" && !rnoInnerhtml.test( value ) &&
15
            !wrapMap[ ( rtagName.exec( value ) || [ "", "" ] )[ 1 ].toLowerCase() ] ) {
16
 
17
            value = jQuery.htmlPrefilter( value );
18
 
19
            try {
20
                for ( ; i < l; i++ ) {
21
                    elem = this[ i ] || {};
22
 
23
                    // Remove element nodes and prevent memory leaks
24
                    if ( elem.nodeType === 1 ) {
25
                        jQuery.cleanData( getAll( elem, false ) );
26
                        elem.innerHTML = value;
27
                    }
28
                }
29
 
30
                elem = 0;
31
 
32
                // If using innerHTML throws an exception, use the fallback method
33
            } catch ( e ) {}
34
        }
35
 
36
        if ( elem ) {
37
            this.empty().append( value );
38
        }
39
    }, null, value, arguments.length );
40
},
 

html() 方法返回了一个闭包函数，它是一个用于 set/get 一个集合的多功能函数

第 9-11 行，表示直接调用 element.html() 而没有加入任何参数时，直接返回当前元素中的内容

第 14 行的 rnoInnerhtml 在前面有定义，rnoInnerhtml = /、