我正在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);
}