一个令人苦恼的问题
为什么 不能显示 22222 啊，，
把var menuItemContainer=document.getElementById( "tr1 ");
换位var menuItemContainer=document.getElementById( "t1 ");
相对于层就能显示啊？
异常奇怪
<head>
<script language= "javascript ">
function test(){
objDragItem = document.createElement( "tr ");
var menuItemContainer=document.getElementById( "tr1 ");
menuItemContainer.insertBefore(objDragItem);
objDragItem.outerHTML = " <tr> <td> 22222 </td> </tr> ";
}
</script>
</HEAD>
<BODY bgcolor= "#FFFFFF " text= "#000000 " leftmargin= "0 " topmargin= "0 ">
<DIV id= "t1 "> </DIV>
<table>
<tr id= "tr1 ">
<td> 111 <td>
<tr>
</table>
</BODY>
<script>
test();
</script>
[解决办法]
insertBefore()需要两个参数,第一个参数(元素)插在第二个参数(元素)前面
或你可以用 父元素.appendChild (一个参数);加在最后面,对于innerHTML或outerHTML先赋值,再insertBefore/appendChild
[解决办法]
对于用createElement方法创建的元素，不能用outerHTML或innerHTML改变其内容
所以下面的层可以
但你可以这样：
<html>
<head>
</HEAD>
<script language= "javascript ">
function test(){
objDragItem = document.createElement( "tr ");
myTd= document.createElement( "td ");
myText=document.createTextNode( "22222 ");
myTd.appendChild(myText);
objDragItem.appendChild(myTd);
var menuItemContainer=document.getElementById( "tr1 ");
menuItemContainer.parentNode.insertBefore(objDragItem,menuItemContainer);
}
</script>
<BODY bgcolor= "#FFFFFF " text= "#000000 " leftmargin= "0 " topmargin= "0 ">
<DIV id= "t1 "> 单击添加！ </DIV>
<table>
<tr id= "tr1 ">
<td> 111 <td>
<tr>
</table>
</BODY>
<script>
document.body.onclick=test;
</script>
</html>
顺便更正一下insertBefor的用法：）
[解决办法]
谁说createElement 出来的元素不能用outerHTML或innerHTML改变其内容
你证实过了么,我做过很多项目都可以动态改变的
------解决方案--------------------
Ischema(花客) 说的也不全错,
outerHTML 是只读的,而且似乎只能得到最外层的标签,比如 <tr> <td> ... </td> </tr> ,outerHTML为 <TR> </TR> ,但我记得不是这样的,不知道是不是和别的什么因素有关,
在createElement时,可以createElement( "div ");createElement( " <div style= " "> </div> ");
但不能标签嵌套,比如 createElement( " <tr> <td> 222 </td> </tr> ");X
下面提供几种表格新建行的方法
<%@ Page Language= "C# " AutoEventWireup= "true " CodeFile= "Default.aspx.cs " Inherits= "WebPages_Test_Default " %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head runat= "server ">
<title> 无标题页 </title>
<script type= "text/javascript ">
function test()
{
//方法1
// var TABLE = document.getElementById( "tb1 ");
// var TR = document.getElementById( "tr1 ");
// var TD = document.getElementById( "td1 ");//
// var TBODY = TABLE.children[0];
// var newTR = document.createElement( "tr ");
// var newTD = document.createElement( "td ");
// newTD.innerHTML= " <input value= '222 '> </input> ";
// newTR.appendChild(newTD);
// TBODY.appendChild(newTR);
//方法2
// var TABLE = document.getElementById( "tb1 ");
// var ROW = TABLE.insertRow();
// var CELL = ROW.insertCell();
// CELL.innerHTML= " <input value= '222 '> </input> ";
//方法3
// var TABLE = document.getElementById( "tb1 ");
// var TR = document.getElementById( "tr1 ");
// var newTR = TR.cloneNode(true);
// var TBODY = TABLE.children[0];
// TBODY.appendChild(newTR);
}
</script>
</head>
<body style= "background: #FFFFFF; color: #000000; margin: 0px ">
<form id= "form1 " runat= "server ">
<div>
<table id= "tb1 ">
<tr id= "tr1 ">
<td id= "td1 "> 111 </td>
</tr>
</table>
<input type= "button " value= "test " onclick= "test(); " />
</div>
</form>
</body>
</html>
