FirefoxでInsertAdjacent系メソッドを利用する

/web/javascript

Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

JavascriptでHTML中に「何か」を挿入したい場合、InsertAdjacent系メソッドは凄く便利。でもFirefoxは未対応（IEやOperaは対応している）。「なんとかならないかな～」といろいろ探していたら、別件の調査中にたまたま使える方法を見つけたので、InsertAdjacent系メソッドのまとめと共にメモっておきます。

書式

  • object.insertAdjacentElement('type',oElement)
  • object.insertAdjacentHTML('type','HTML')
  • object.insertAdjacentText('type','text')
第一引数（type）
  • 開始タグの前に設置 → beforeBegin
  • 終了タグの前に設置 → beforeEnd
  • 開始タグの後に設置 → afterBegin
  • 終了タグの後に設置 → afterEnd
第二引数（oElement,HTML,text）
  • oElement → オブジェクト
  • HTML → 文字列
  • text → テキストノード

memo: typeをシングルクオーテーションで囲うことは忘れがちなので、注意しよう。

Script

下記のコードを読み込めば、FirefoxでもInsertAdjacent系メソッドを使用できる。

  1. if(typeof HTMLElement!="undefined" && !HTMLElement.prototype.insertAdjacentElement){
  2. HTMLElement.prototype.insertAdjacentElement = function(where,parsedNode)
  3. {
  4. switch (where.toUpperCase())
  5. {
  6. case 'BEFOREBEGIN':
  7. this.parentNode.insertBefore(parsedNode,this)
  8. break;
  9. case 'BEFOREEND':
  10. this.appendChild(parsedNode);
  11. break;
  12. case 'AFTERBEGIN':
  13. this.insertBefore(parsedNode,this.firstChild);
  14. break;
  15. case 'AFTEREND':
  16. if (this.nextSibling) this.parentNode.insertBefore(parsedNode,this.nextSibling);
  17. else this.parentNode.appendChild(parsedNode);
  18. break;
  19. }
  20. }
  21.  
  22. HTMLElement.prototype.insertAdjacentHTML = function(where,htmlStr)
  23. {
  24. var r = this.ownerDocument.createRange();
  25. r.setStartBefore(this);
  26. var parsedHTML = r.createContextualFragment(htmlStr);
  27. this.insertAdjacentElement(where,parsedHTML)
  28. }
  29.  
  30. HTMLElement.prototype.insertAdjacentText = function(where,txtStr)
  31. {
  32. var parsedText = document.createTextNode(txtStr || '')
  33. this.insertAdjacentElement(where,parsedText)
  34. }
  35. };

参照

Note: スパム対策が面倒なので、コメント投稿を廃止しました。以前のコメントは残します。
ご意見・ご要望はtwitter@sigwygかはてブコメントにて。