.html()与.innerHTML的区别

Question

我正在开发一个文本编辑器。当用户双击特定的<div>时，将设置contentEditable属性为true并显示一些编辑器工具。然后，用户可以选择单击“保存”或“取消”。如果他选择取消，则希望还原此

中的先前数据。所以，我在第一次双击时复制了数据（temp['htmlTxt']），然后：

$('#esc').click(function() {
    var confEsc = confirm('---\n\nSouhaitez-vous quitter sans enregistrer vos modifications ?\n\n---');

    if(confEsc) { 

       //Do you know why that works :
       var id = document.getElementById(temp['myId']);
       id.innerHTML = temp['htmlTxt'];

       //and why that doesn't work ?
       $('#'+temp['myId']).html(temp['htmlTxt'])
    }
});

我不明白为什么使用经典的JavaScript可以正常工作，而使用jQuery却不能...

- Vincencino il Franssoso

---

temp['htmlTxt'] 等于什么？ - qwertymk

你能同时展示一下你的HTML吗？ - helle

使用jQuery时到底会发生什么？它会将其设置为空白吗？还是根本不改变它？会踢你的小狗吗？ - Kitsune

你在Chrome控制台或Firebug中有收到任何错误信息吗？老实说，我没看出有什么问题。 - James Hay

这是一个关于编程的内容，请将以下英文文本翻译成中文。仅返回翻译后的文本：这里有 jsfiddle 的示例（但它能用）...... 我在我的项目中有相同的结构，但数据更加复杂。http://jsfiddle.net/deee9/5/ - Vincencino il Franssoso

Answer 1

这两者几乎相同。然而，jQuery会进行一些预处理，这可能会妨碍你的进展... jQuery全局变量

rnoInnerHtml = /<(?:script|style)/i;
rtagName = /<([\w:]+)/;
rleadingWhitespace = /^\s+/;
rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi;
wrapMap = {
    "option": [1, "<select multiple='multiple'>", "</select>"],
    "legend": [1, "<fieldset>", "</fieldset>"],
    "thead": [1, "<table>", "</table>"],
    "tr": [2, "<table><tbody>", "</tbody></table>"],
    "td": [3, "<table><tbody><tr>", "</tr></tbody></table>"],
    "col": [2, "<table><tbody></tbody><colgroup>", "</colgroup></table>"],
    "area": [1, "<map>", "</map>"],
    "_default": [0, "", ""],
    "optgroup": [1, "<select multiple='multiple'>", "</select>"],
    "caption": [1, "<table>", "</table>"],
    "colgroup": [1, "<table>", "</table>"],
    "tfoot": [1, "<table>", "</table>"],
    "tbody": [1, "<table>", "</table>"],
    "th": [3, "<table><tbody><tr>", "</tr></tbody></table>"]
};

.html(value) setter

var elem = this[0] || {},
    i = 0,
    l = this.length;

if (typeof value === "string" && !rnoInnerhtml.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(elem.getElementsByTagName("*"));
                elem.innerHTML = value;
            }
        }

        elem = 0;

        // If using innerHTML throws an exception, use the fallback method
    } catch(e) {}
}

if (elem) {
    this.empty().append(value);
}

这是来自.html(string)方法的最新版本。

简单来说，如果你的value (1) 不是字符串，(2) 包含脚本标签，(3) 你使用的浏览器不支持前导空格且未修剪字符串，(4) 你的标记属于wrapMap特殊用例之一，或者(5) innerHTML由于任何其他原因失败... 那么你实际上就是在调用.empty().append(value)，这是完全不同的处理方式。-ck

- ckozl

Answer 2

我认为这完全取决于temp ['htmlTxt']的内容。 我见过有人试图使用.html（）将javascript注入页面（作为像<script type="text/javascript"><script>这样的标记），但是jQuery会将其剥离。

但是，顺便说一句，DOM不是一个字符串。 innerHTML容易在旧浏览器中泄漏。 考虑使用不同于.innerHTML的属性

- Matt Esch