javascript - FirefoxとChromeのlastchild.appendchild

Question

次のコード

var descriptdiv = document.createElement("div");
document.body.lastChild.appendChild(descriptdiv);

IEで動作しますが、FireFoxとChromeでは動作しません。どうすればそれらのブラウザでも動作させることができますか？

Answer 1

最も可能性が高いのは、Firefox/Chrome がテキスト ノードを として返すことですlastChild。これは、これらのブラウザーがコードの末尾にある空白/改行をテキスト ノードとして返すためです。div をテキスト ノードに追加できないため、コードは失敗します。

一方、IE は空白/改行を無視し、正常に追加できる最後の要素を返します。次のような関数を使用して、最後の要素を取得できます。

function getLastChild(n) {    
    var x = n.lastChild;

    // noteType == 1 is an element node - keep searching until we find one
    while (x && x.nodeType != 1){
      x = x.previousSibling;
    }

    // don't allow a non element node to be returned.
    if(x && x.nodeType != 1){
      x = null;
    }
    return x;    
}

Answer 2

img、br、hr、その他多くの要素にブロック要素を追加することはできません。

おそらく、必要なコンテナについてある程度のアイデアがあるでしょう。

function addaBlocktothelastChild(block, rx){
    var next, elements= document.body.getElementsByTagName('*'),
    L= elements.length, count= L;
    rx= rx ||  /^(DIV|P|TD|LI|DT|DD)$/i;
    while(L && !rx.test(elements[--L].tagName));
    if(L>= 0){
        return elements[L].appendChild(block);
    }
    return document.body.appendChild(block);
}



var block= document.createElement('div');
block.id= 'Zed';
addaBlocktothelastChild(block);
alert(document.getElementById('Zed').parentNode)

/^(DIV|P|TD|LI|DT|DD|BLOCKQUOTE|FORM|ARTICLE|ASIDE|FOOTER|HEADER|NAV|SECTION)/i