.html() vs .innerHTML

Question

Я работаю над текстовым редактором. Когда пользователь дважды щелкает по определенному <div>, для свойства contentEditable установлено значение true и появляются некоторые инструменты редактора. Затем пользователь может выбрать между нажатием «save» и «escape». Если он ускользнет, ​​я хочу восстановить предыдущие данные в этом <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

Эти 2 практически идентичны. Однако 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 (значение) сеттер

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

Answer 2

Это всецело зависит от содержимое temp ['htmlTxt'] Я бы подумал. Я видел, как люди пытались вставить javascript на страницу (как тег вроде <script type="text/javascript"><script>), используя .html(), но jQuery удаляет это.

Но на стороне и, вероятно, непопулярном примечании, DOM не является строкой. innerHTML подвержен утечке через старые браузеры. Рассмотрим использование другого свойства, чем .innerHTML