DOM insertBefore 使用遇到的问题,记录下

object.insertBefore(newnode,targetnode) 方法用于在指定的子节点之前插入节点。

指定节点与新节点为同级关系.注意:object必须与targetnode为父子关系,父孙关系或者其他关系均出错。

 

今天做的时候,table中没有加tbody,直接取的table对象,clone_node tr对象,但当 inserBefore ,object为table, targetnode为table.rows[0]时就会报错。

后来发现,table  与 tr 间 还有一级 tbody对象,所以,insertBefore函数的object与targetnode,不是父子关系,所以会报错

 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title> </head> <body> <mce:script type="text/javascript"><!-- function appendRow() { var t = document.getElementById('tbl'); var tdy = document.getElementById('tdy'); //if IE, 可以 t.tBodies[0] var len = t.rows.length; var last_row = t.rows[len-1]; var clone_node = last_row.cloneNode(true); //alert(t.lastChild.nodeName) //FF中last child的value和IE不同 //tdy.appendChild(clone_node); tdy.insertBefore(clone_node,t.rows[0]); } // --></mce:script> <table id="tbl"> <tbody id="tdy"> <tr id="row1"><td>one</td><td>one</td></tr> <tr id="row2"><td bgcolor="red" width="100">two</td><td width="50">two</td></tr> </tbody> </table> <input type="button" onclick="appendRow()" value="Add row"> </body> </html>

 

你可能感兴趣的:(html,function,object,table,input,button)