大笨鳥的私房菜

問題描述：

當頁面上有某個 Tag 被包在 A Tag 之內 (例如：<a><p>文字</p></a>)，若取得此 Tag 並使用 innerHTML 來填入字串時，Firefox 會很雞婆的在填入的字串前後自動加上 A Tag。

例如：我們要取得如下結構中的 P Tag 後，用 innerHTML 填入文字

<a id='link'><p id="text">TEXT</p></a>

var node = document.getElementById('text');
node.innerHTML = 'my text';

原本預期最後的結果應該是 <a id='link'><p id="text">my text</p></a>，
但最後卻會變成 <a id='link'><p id="text"><a xmlns='http://www.w3.org/1999/xhtml'>my text</a>&</p></a>，
也就是我們加入的文字會被用 A Tag 包起來。

這種情況不會發生在 IE 上，另外，就算是在 Firefox 上，如果是直接抓取 A Tag 來使用 innerHTML 填入文字的話，也不會有這樣的問題。
發生的原由不明。

解決方法：

由於只要是被包在 A Tag 內的任何 Tag，一旦使用了 innerHTML 一定會有上述的問題發生，因此小弟解決的方法是先將 Tag 從 A 之中剝離後，再使用 innerHTML 填入文字，然後再將 Tag 加回 A Tag 之中。

延續上面的例子，將 Javascript 改寫成

var myLink = document.getElementById('link');
var node   = document.getElementById('text');
node = myLink.removeChild(node); // 將要使用 innerHTML 的 Tag 暫時先從 A Tag 中移除
node.innerHTML = 'my text';      // 使用 innerHTML 填入文字
myLink.appendChild(node);        // 再將 Tag 加回到 A Tag

執行之後所呈現的結果就能符合我們的期待了。