Javascript Can'；t在Tr内追加子项>；Div

我有两个表，当我尝试将第二个表添加到表1（

tbl1

）tr中时，表2（

tbl2

）自动删除

标记：

函数myFunction（）{
var tabletr=document.getElementById（“tbl1”）；
var rowtr=tabletr.insertRow（1）；
rowtr.appendChild（document.getElementById（“tbl2”）；
rowtr.outerHTML=“”+rowtr.outerHTML+”；
}

表1-1-1
表1-1-2
表1-2-1
表1-2-2



表2-1-1
表2-1-2
尝试使用它

当您

appendChild（）

第二个表时，它将从DOM中的当前位置删除，并插入您指向它的位置。事情就是这样

方法的作用是：在指定父节点的子节点列表的末尾添加一个节点。如果给定的子节点是对文档中现有节点的引用，则appendChild（）会将其从当前位置移动到新位置（在将该节点附加到其他节点之前，无需将其从父节点中移除）

---

您也会得到无效的HTML。

元素的唯一有效子元素是

（或

），行本身必须至少有一个子元素有效。

由于要追加表，因此表会被移动。如果要复制它，请克隆它。另外，不要编辑outerHTML。更正的代码段

函数myFunction（）{
var tabletr=document.getElementById（“tbl1”）；
var rowtr=tabletr.insertRow（1）；
rowtr.appendChild（document.getElementById（“tbl2”）.cloneNode（true））；
}

表格，
tr，
运输署{
边框：1px实心；
}

表1-1-1
表1-1-2
表1-2-1
表1-2-2

表2-1-1
表2-1-2
试试看

需要在单元格中放入div

函数myFunction（）{
var tabletr=document.getElementById（“tbl1”）；
var rowtr=tabletr.insertRow（-1）；
var cell=rowtr.insertCell（0）；
cell.colSpan=2；
var div=document.createElement（“div”）；
div.appendChild（document.getElementById（“tbl2”）；
子单元（div）；
}

表1-1-1
表1-1-2
表1-2-1
表1-2-2



表2-1-1
表2-1-2
试一试

不是

的有效子级，

不是

的有效子级