JQ HTML과 innerHTML의 차이점

오늘 JQ의 몇 가지 재미있는 발견을 먼저 적어 두어라

인터넷에서 누군가는 이미 알고 있을지 모르지만, 나는 찾지 못했다.

html innerHTML 차이점

JQ 관련 원본

html: function(e) {
    console.log(this);
    return v.access(this,
    function(e) {
        var n = this[0] || {},
        r = 0,
        i = this.length;
        if (e === t) return n.nodeType === 1 ? n.innerHTML.replace(ht, "") : t;
        if (typeof e == "string" && !yt.test(e) && (v.support.htmlSerialize || !wt.test(e)) && (v.support.leadingWhitespace || !pt.test(e)) && !Nt[(vt.exec(e) || ["", ""])[1].toLowerCase()]) {
            e = e.replace(dt, "$2>");
            try {
                for (; r < i; r++) n = this[r] || {},
                n.nodeType === 1 && (v.cleanData(n.getElementsByTagName("*")), n.innerHTML = e);
                n = 0
            } catch(s) {}
        }
        n && this.empty().append(e)
    },
    null, e, arguments.length)
}

innerHTML 부분에서 JQ가 용착 처리를 한 것을 알 수 있다.

#html 방법은 함수를 매개 변수로 사용할 수 있습니다

    function getStr(){
        return "is innerHTML"
    }
    $("#box").html(getStr);//is innerHTML 
    document.getElementById("box").innerHTML = getStr;//function getStr(){return "is innerHTML"}

access에서 매개 변수를 처리하는 과정에서 함수 매개 변수를 단독으로 처리했기 때문이다

#access 코드 세그먼트

access: function(e, fn, r, i, s, o, u) {
    var a, f = r == null,
    l = 0,
    c = e.length;
    if (r && typeof r == "object") {
        for (l in r) v.access(e, fn, l, r[l], 1, o, i);
        s = 1
    } else if (i !== t) {
        a = u === t && v.isFunction(i),
        f && (a ? (a = fn, fn = function(e, t, n) {
            return a.call(v(e), n)
        }) : (fn.call(e, i), n = null));
        console.log( i.call(e[l], l, fn(e[l], r)));
        if (fn) for (; l < c; l++) fn(e[l], r, a ? i.call(e[l], l, fn(e[l], r)) : i, u);
        s = 1
    }
    return s ? e: f ? n.call(e) : c ? n(e[0], r) : o
}

호출 콜 방법을 통해 호출 함수의 목적을 달성하는 데 주의해야 할 것은 이 방법은 데이터/attr/prop/text/html/css/each 모두 인용되어 있기 때문에 당신은 알고 있습니다