Question

我正在编写文本编辑器。当用户双击特定<div>时，contentEditable属性设置为true，并显示一些编辑器工具。然后，用户可以选择单击“保存”和“退出”。如果他逃脱，我想恢复此<div>中的先前数据。所以我先复制数据，先双击（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 ......

Answer 1

这两个实际上是相同的。然而，jQuery做了一些可能妨碍你的预处理......

jQuery Globals

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)

上的setter的当前版本

所以基本上如果你value（1）不是一个字符串，（2）有一个脚本标签，（3）你的浏览器不支持领先的空格而你字符串isn' t trimmed，（4）你的标签属于wrapMap特殊用例或（5）innerHTML由于任何其他原因而失败。那么你实际上是在调用.empty().append(value)这是一个完全不同的蜡球。 .. -ck

Answer 2

完全取决于我想的temp ['htmlTxt']的内容。我看到有人试图使用.html（）将javascript注入到页面上（作为像<script type="text/javascript"><script>这样的标记），但jQuery将其删除。

但是在一边，可能不受欢迎的注意，DOM不是一个字符串。 innerHTML很容易在旧浏览器中泄漏。考虑使用与.innerHTML不同的属性

.html（）vs .innerHTML

2 个答案: