$('#id'）.html(x） 与 el.innerHTML = x 有什么不同

What does $('#id').html(x) do differently to el.innerHTML = x

本文关键字：什么 el #id html innerHTML      更新时间：2023-09-26

我正在javascript/DOM中存储东西并提交ajax调用。当我这样做时，在成功和/或 .done 函数中：

$('#results').html(data);

javascript/DOM 模型变得损坏，但当我这样做时：

var el = document.getElementById('results');
el.innerHTML = data;

然后一切都按预期工作。我知道这里没有太多信息，但我的问题是 jQuery html（） 除了设置可能影响页面状态的内部 HTML 之外，还做了什么。

将

html 函数与字符串而不是 innerHTML 一起使用的主要原因是为了防止内存泄漏或内存数据不一致：此函数删除事件处理程序或链接到已删除元素的其他 jQuery 数据。

如果data是一个字符串，那么$('#results').html(data);没有理由比使用 innerHTML 更"损坏"您的 DOM

。

在 Internet Explorer 9 和更早版本中，DOM 中的表是只读的。这意味着尝试执行el.innerHTML = newHTML;将导致如果el是 TBODY、TR 等，则引发错误。jQuery .html() 函数通过使用回退方法（this.empty().append(value) jQuery 源代码）为您处理这种情况，允许您对所有浏览器使用相同的代码，无论版本如何。

可能值得看看 jQuery 源代码中该方法的代码：

html : function (value) {
    return jQuery.access(this, function (value) {
        var elem = this[0] || {},
        i = 0,
        l = this.length;
        if (value === undefined) {
            return elem.nodeType === 1 ?
            elem.innerHTML.replace(rinlinejQuery, "") :
            undefined;
        }
        // See if we can take a shortcut and just use innerHTML
        if (typeof value === "string" && !rnoInnerhtml.test(value) &&
            (jQuery.support.htmlSerialize || !rnoshimcache.test(value)) &&
            (jQuery.support.leadingWhitespace || !rleadingWhitespace.test(value)) &&
            !wrapMap[(rtagName.exec(value) || ["", ""])[1].toLowerCase()]) {
            value = value.replace(rxhtmlTag, "<$1></$2>");
            try {
                for (; i < l; i++) {
                    // Remove element nodes and prevent memory leaks
                    elem = this[i] || {};
                    if (elem.nodeType === 1) {
                        jQuery.cleanData(getAll(elem, false));
                        elem.innerHTML = value;
                    }
                }
                elem = 0;
                // If using innerHTML throws an exception, use the fallback method
            } catch (e) {}
        }
        if (elem) {
            this.empty().append(value);
        }
    }, null, value, arguments.length);
}
相关文章：