冷門Javascript API--element.insertAdjacentHTML

John Resig(jQueryの著者)は2008年にelmentを試みたことがある.insertAdjacentHTMLはjQueryを導入したが、彼は最終的に放棄した.主な原因は次のとおりです.

IE 6ではtable,tbody,theadまたはtrへのhtmlの挿入はサポートされていません.そうしないと、エラーが放出されます.

ではXMLドキュメントはサポートされていません.

しかし、当時、この由IE 4.0から表示されるインタフェースはHTML 5のインタフェースリストに入っており、より多くのブラウザがこのインタフェースを実現します.以下は現在のデスクトップブラウザのサポート状況です.
 
Feature
Chrome
Firefox (Gecko)
Internet Explorer
Opera
Safari (WebKit)
Basic support
1.0
8.0 (8.0)
4.0
7.0
4.0 (527)
 
しかし、私たちはなぜこのインタフェースに注目しているのでしょうか.
 
比element.InnerHTMLのパフォーマンス向上
テストの結果、element.InsertAdjacentHTMLは、ほとんどの場合、elementよりも優れている.InnerHTMLのパフォーマンス:
http://jsperf.com/insertadjacenthtml-perf/4
これはDocument Fragmentsよりも良いHTMLドキュメント挿入案かもしれません.Document FragmentsのいくつかのIEバージョンでの表現が悪いことを知っているからです(IEの実現方法は他とは違うようですね......).
これは、テンプレートの最適化に実行可能で簡単なスキームを提供します.
わかったわInsertAdjacentHTMLというインタフェースはどう使いますか?
 
指定された場所にHTMLを挿入
element.insertAdjancentHTML(position, html)
文字列パラメータpositionと文字列パラメータhtmlコードを入力する必要があります.jQueryのHTML挿入方法と照らし合わせて,このpositionの対照関係を得ることができる.
.insertAdjacentHTML("beforeBegin", ...)  ——  before
.insertAdjacentHTML("afterBegin", ...)  ——  prepend
.insertAdjacentHTML("beforeEnd", ...)  ——  append
.insertAdjacentHTML("afterEnd", ...)  ——  after
次のようになります.
beforeBegin:要素の前に挿入
afterBegin:エレメントの最初のサブエレメントの前に挿入
beforeEnd:エレメントの最後のサブエレメントの後ろに挿入
afterEnd:エレメントの後に挿入
ただし、要素が空の場合、innerHTMLに似ています.たとえば、次のようになります.

var menu = document.createElment("div");
menu.insertAdjacentHTML("afterEnd",
    "<p>Hello world!</p>");

ここはmenuとinnerHTML('

Hello world!

')は同じです.
 
まとめ
主に需要を見る.私たちのプロジェクトはIE 6を考慮しなくてもいいので、IE 6の問題は問題ではありません.またテンプレートエンジンはXML Documentを挿入しないので、2つ目の問題も問題ではありません.
 
参考資料
DOM insertAdjacentHTML  . John Resig
element.insertAdjacentHTML  . MDN