2016-03-23 8 views
0

は、次のコードは、div要素をロードするAJAXするために使用されます。ピュアJavaScriptの代替()

私はそれを持っている唯一の問題は、.html() HTMLをレンダリングし、私は私の見解は、任意の脱出生のHTMLのクリーンであるように、純粋なJSの代替とそれを置き換えるために良いアイデアかもしれないと思ったということです。

私はこれについて自分の考えを聞いてみたいです。

$(document).ready(function() { 
     $('.ajax_load').each(function(index, element) { 
     var url = $(element).data('remote-url') 
     if (url) { 
      $.get(url, function(responseText) { 
      $(element).html(responseText); 
      }) 
     } else { 
      console.log("missing url for ajax!") 
     } 
     }) 
    }) 
+0

ほぼすべてのラインはjQueryの、応答を処理していない部分だけを使用しています。とにかく、おそらくjQueryライブラリをロードしています。あなたもそれを使うかもしれません。 raw HTMLのレンダリングを無効にしたい場合は、代わりに '$(element).text(responseText)'を使ってみてください。 – Malk

+1

あなたは常にjQueryのソースファイルを見ることができ –

+0

'element.innerHTML =「」'基本的にready'や他の多くの古いものとない非常にパフォーマンスのjQueryのメソッド 'の必要性を削除しますあなたのサイトのフッターに使用されます。 – thednp

答えて

5

あなたはtextContentを使用することができます。

Node.textContentプロパティは、ノード とその子孫のテキストコンテンツを表します。

element.textContent = responseText; 
1

jQueryの.html()メソッドは、文字列を受け取り、任意のHTMLマークアップを処理することができ、DOMを更新するようにHTMLパーサによってその文字列を実行します。 jQueryの.text()方法はまた、文字列を受け取りますが、その文字列は、(それはHTMLが含まれている場合でも)処理のためのHTMLパーサに渡されず、任意のマークアップは脱出し、ページ内のテキストコンテンツとして含まれています。


あなたはjQueryのを使用しないしたい場合は、DOM .innerHTMLhttps://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)プロパティで.html()と同じことを達成することができます。

あなたは.text()と同じことを実現したい場合、あなたは独自の/レガシー.innerTexthttps://developer.mozilla.org/en-US/docs/Web/API/Node/innerText)プロパティまたは標準textContenthttps://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)DOMプロパティを使用することができます(ただし、後者はIE 9までIEではサポートされていません) 。

+3

は 'innerText'はそれはIEはそれがMSによって作成された – Oriol

+0

をブツだが、ほかのすべての主要なブラウザでサポートされ、標準ではありません。しかし、いいえ、それは標準ではありません。デファクトスタンダード。 –

+0

いいえ、FirefoxはinnerTextをサポートしなくなりました - 標準的な方法はtextContentを使用することです。変更を加えると、私はあなたにアップヴォートを与えます。 – ndugger