標(biāo)準(zhǔn)參考

無(wú)。

問(wèn)題描述

Firefox 不支持 DOM 對(duì)象的 insertAdjacentHTML insertAdjacentText 方法。

造成的影響

使用這兩個(gè)方法將在 Firefox 瀏覽器內(nèi)報(bào)錯(cuò)。

受影響的瀏覽器

問(wèn)題分析

insertAdjacentHTML 方法

insertAdjacentHTML 方法是比 innerHTML,、outerHTML 屬性更靈活的插入 HTML 代碼的方法。它可以實(shí)現(xiàn)在一個(gè) DOM 元素的前面,、后面,、第一個(gè)子元素前面、最后一個(gè)子元素后面四個(gè)位置,，插入指定的 HTML 代碼,。不是 W3C 標(biāo)準(zhǔn)的 DOM 方法。

這個(gè)方法最初是由 IE4.0 以上版本實(shí)現(xiàn),，為私有特性,。詳細(xì)內(nèi)容請(qǐng)參見(jiàn) MSDN 說(shuō)明：insertAdjacentHTML Method。

W3C 近期在 HTML5 草案中擴(kuò)展了這個(gè)方法,，更多詳細(xì)的信息,，請(qǐng)參見(jiàn) W3C HTML5 草案：3.5.7 insertAdjacentHTML()。

目前,，主瀏覽器中,，只有 Firefox 不支持 insertAdjacentHTML 方法。

<script type="text/javascript">
window.onload = function() {
var ps = document.getElementById("one");
try {
ps.insertAdjacentHTML("beforeend", "<span style='background:yellow;'>hi</span>");
} catch(err) {
document.getElementById("info").innerHTML = err;
}
}
</script>
<p id="one" style="background:silver; width:300px;">
this is
<i style="width:100px; background-color:gold;">another</i>
text
</p>
<div id="info"></div>

測(cè)試用例中,，頁(yè)面加載的時(shí)候,，會(huì)執(zhí)行 one 的 insertAdjacentHTML方法。

如果執(zhí)行期間有JS錯(cuò)誤,，錯(cuò)誤信息會(huì)在 info 中輸出,。

如果執(zhí)行成功，one 元素內(nèi)容的最后會(huì)被加上一個(gè)有黃色背景的文本“hi”,。

在各瀏覽器下的截圖：

Firefox	IE6 IE7 IE8 Chrome Safari Opera

可見(jiàn),，只有 Firefox 下不支持 insertAdjacentHTML 方法,。

insertAdjacentText 方法

insertAdjacentText 是比 innerText、outerText 屬性更靈活的插入文本的方法,。它可以實(shí)現(xiàn)在一個(gè) DOM 元素的前面,、后面、第一個(gè)子元素前面,、最后一個(gè)子元素后面四個(gè)位置,，插入指定的文本。不是 W3C 標(biāo)準(zhǔn)的 DOM 方法,。

這個(gè)方法是 IE 私有特性,。詳細(xì)內(nèi)容請(qǐng)參見(jiàn) MSDN 說(shuō)明：insertAdjacentText Method。

至今為止 W3C 的 HTML5 草案還未涉及此方法,。

目前,，主瀏覽器中，只有 Firefox 不支持 insertAdjacentText 方法,。

<script type="text/javascript">
window.onload = function() {
var ps = document.getElementById("one");
try {
ps.insertAdjacentText("beforeend", "<span style='background:yellow;'>hi</span>");
} catch(err) {
document.getElementById("info").innerHTML = err;
}
}
</script>
<p id="one" style="background:silver; width:300px;">
this is
<i style="width:100px; background-color:gold;">another</i>
text
</p>
<div id="info"></div>

• 測(cè)試用例中，頁(yè)面加載的時(shí)候,，會(huì)執(zhí)行 one 的 insertAdjacentText 方法,。
• 如果執(zhí)行期間有 JS 錯(cuò)誤，錯(cuò)誤信息會(huì)在 info 中輸出,。

如果執(zhí)行成功,，one 元素內(nèi)容的最后會(huì)被加上文本 “<span style='background:yellow;'>hi</span>”。

在各瀏覽器下的截圖：

Firefox	IE6 IE7 IE8 Chrome Safari Opera

可見(jiàn),，只有 Firefox 下不支持 insertAdjacentText 方法,。

解決方案

在 Firefox 中，可通過(guò)擴(kuò)展 HTMLElement 的原型 (prototype) 來(lái)實(shí)現(xiàn)這兩個(gè)方法：

if (typeof(HTMLElement) != "undefined") {
HTMLElement.prototype.insertAdjacentElement = function(where, parsedNode) {
switch (where) {
case "beforeBegin":
this.parentNode.insertBefore(parsedNode, this);
break;
case "afterBegin":
this.insertBefore(parsedNode, this.firstChild);
break;
case "beforeEnd":
this.appendChild(parsedNode);
break;
case "afterEnd":
if (this.nextSibling)
this.parentNode.insertBefore(parsedNode, this.nextSibling);
else
this.parentNode.appendChild(parsedNode);
break;
}
}
HTMLElement.prototype.insertAdjacentHTML = function(where, htmlStr) {
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var parsedHTML = r.createContextualFragment(htmlStr);
this.insertAdjacentElement(where, parsedHTML);
}
HTMLElement.prototype.insertAdjacentText = function(where, txtStr) {
var parsedText = document.createTextNode(txtStr);
this.insertAdjacentElement(where, parsedText);
}
}

參見(jiàn)

知識(shí)庫(kù)

• ...

相關(guān)問(wèn)題

• ...