lastchild.appendchild在Firefox和Chrome

下面的代码lastchild.appendchild在Firefox和Chrome

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

作品在IE浏览器，但不会在Firefox和Chrome浏览器。我怎样才能让它在这些浏览器中工作呢？

来源

2011-09-24 Magiczml

的'lastChild'是不一定和元素节点......你应该先检查......（或者用'lastElementChild'去，但在IE8中不起作用） –

毫无疑问，最后一个子节点是文本节点，可能是IE忽略的换行符。把它放在最后一个可以包含div的元素中 - – kennebec

您最有可能看到的是Firefox/Chrome返回的文本节点为lastChild。这是因为这些浏览器会将代码末尾的空格/换行符作为文本节点返回。由于您不能将div附加到文本节点，因此代码会失败。

另一方面，IE将忽略空白/换行符并返回可以成功附加到的最后一个元素。您可以使用像the following一个函数来获取最后一个元素：

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;  
}

来源

2011-09-24 02:37:53 Pat

我刚要upvote ...然后我看到W3 Schools链接... –

W3学校忘记声明变量'x' ... –

不仅如此，而且如果元素为空或者不包含任何元素节点，代码将会崩溃。不要使用W3School的代码。 – user113716

不能块元素添加到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 |分册）/ I

来源

2011-09-24 03:30:52 kennebec

lastchild.appendchild在Firefox和Chrome

回答

相关问题