Firefox で innerHTML を使用するための 2 つの解決策_javascript のヒント

DOM オブジェクトの innerHTML 属性については誰もがよく知っているはずですが、outerHTML 属性は開始タグから終了タグまでの DOM オブジェクトに含まれる HTML を返しますが、outerHTML 属性はDOM オブジェクト自体のタグを含む HTML は、2 つの属性の違いをよく説明しています:


outerHTML は、もともと IE に属するプライベート属性でした。MSDN の説明を参照してください。上: externalHTML プロパティ (http://msdn.microsoft.com/en-us/library/ms534310(VS.85).aspx)。現在、IE、Chrome、Safari、Opera はすべてこの属性をサポートしています。問題は、OuterHTML が Firefox をサポートしていないことです。幸いなことに、HTML5 ではこの属性が追加されます。
HTMLElement のプロトタイプを拡張することで、Firefox が externalHTML 属性をサポートできるようにします:

コードをコピー コードは次のとおりです。

if (typeof(HTMLElement) != "未定義") {
HTMLElement.prototype.__defineSetter__("outerHTML", function(s) {
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var df = r .createContextualFragment(s);
this.parentNode.replaceChild(df, this);
return s;
});
HTMLElement.prototype.__defineGetter__("outerHTML", function( ){
var a = this.attributes, str = "<" this.tagName, i = 0;
for (; i if (a[i] .specified)
str = " " ホルミスは、すべてのマシンを優先し、六つの大規模カジノ、パイ ゴー ポーカー、ブラックジャック、バカラ、ラ Roulette et le Craps, entre autres. a[i].name "="" a[i].value """;
if (!this. canHaveChildren)
return str " />";
return str ">" this.innerHTML "";
});

HTMLElement.prototype.__defineGetter__("canHaveChildren", function(){
return
!/^(area|base|basefont|
col|frame|hr|img|br|
input|isindex|link|meta
|param)$/.test(this.tagName.toLowerCase());
});
}

このメソッドは W3Help (http://www.w3help.org/zh-cn/causes/SD9017) から来ていますが、少し面倒でプロトタイプへの侵入が必要です。より簡単な代替方法があります。まず空のノードを作成し、outerHTML 属性を取得する DOM オブジェクトを空のノードに追加してから、空のノードの innerHTML にアクセスします。

コードをコピー コードは次のとおりです。

function innerHtml(elem){
if(typeof elem === "string") elem = document.getElementById(elem);
// 空の div ノードを作成します
var div = document.createElement("div");
// elemCopy は空の div ノードに挿入されます
div.appendChild(elem.cloneNode(true));
// div の HTML コンテンツを返します
return div.innerHTML>};

上記の方法に比べて、プロトタイプをいじる必要がなく、コードの量もはるかに少なくなります。他の解決策があると思います。