.html（）と.innerHTML

Question

私はテキストエディタで作業しています。ユーザーが特定の<div>をダブルクリックすると、contentEditableプロパティはtrueに設定され、いくつかのエディタツールが表示されます。次に、ユーザーは「保存」と「エスケープ」をクリックするかどうかを選択できます。彼がエスケープするならば、私はこの<div>の前のデータを復元したい。

Answer 1

これら2つは事実上同じです。しかし、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を（値）セッター

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)

so基本的にあなたがvalue（1）が文字列でない場合、（2）スクリプトタグを持つ場合、（3）あなたが先頭の空白をサポートしていないブラウザで文字列が切り詰められていない場合、 wrapMap特殊なユースケースに該当OR（5）innerHTMLプロパティは、他の理由で失敗した... THENあなたは、本質的に `TEMP [「htmlTxt」]は何

Answer 2

それはに完全に依存して...それは古典的なJavaScriptを使用して正常に動作していないjQueryを使って、なぜ

$('#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']) 
    } 
}); 

が、私は理解していない。だから私は、最初のダブルクリック（temp['htmlTxt']）と上のデータをコピーしますtempの内容['htmlTxt']私は思います。 .html（）を使用してjQueryがこれを取り除くと、ページ上に（<script type="text/javascript"><script>のようなタグとして）javascriptを挿入しようとしている人を見てきました。

しかし、面白くないノートでは、DOMは文字列ではありません。 innerHTMLは古いブラウザ間で漏洩する傾向があります。 .innerHTML以外のプロパティを使用することを検討してください。