lastchild.appendchild в Firefox и Chrome

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 | СЧ | РАЗДЕЛ) / я