不能在appendChild内Tr>Div

Question

我有两个表，当我尝试将appendChild第二个表放入table1 (tbl1) tr时，table2 (tbl2)秋季删除<table...>标签：

​

function myFunction() {
    var tabletr = document.getElementById("tbl1");
    var rowtr = tabletr.insertRow(1);
    rowtr.appendChild(document.getElementById("tbl2"));

    rowtr.outerHTML = "<div>" + rowtr.outerHTML + "</div>";
	
}

<table id='tbl1' style='background: lightblue;'>
<tr>
<td>table 1 - 1-1</td>
<td>table 1 - 1-2</td>
</tr>
<tr>
<td>table 1 - 2-1</td>
<td>table 1 - 2-2</td>
</tr>
</table>
<br />
<hr />
<table id='tbl2' style='background: lightgray;'>
<tr>
<td>table 2 - 1-1</td>
<td>table 2 - 1-2</td>
</tr>
</table>


<button onclick="myFunction()">Try it</button>

​

截图：

​

Answer 1

需要在牢房里放div。

​

function 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"));
    cell.appendChild(div);
}

<table id='tbl1' style='background: lightblue;'>
  <tr>
  <td>table 1 - 1-1</td>
  <td>table 1 - 1-2</td>
  </tr>
  <tr>
  <td>table 1 - 2-1</td>
  <td>table 1 - 2-2</td>
  </tr>
</table>
<br />
<hr />
<table id='tbl2' style='background: lightgray;'>
  <tr>
  <td>table 2 - 1-1</td>
  <td>table 2 - 1-2</td>
  </tr>
</table>


<button onclick="myFunction()">Try it</button>

​

Answer 2

当您对第二个表进行appendChild()时，它将从DOM中的当前位置移除，并插入您所指向的位置。这就是为什么是该起作用。

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

您还会得到无效的HTML。<tr>元素的唯一有效子元素是<td> (或<th>)，行必须至少有其中一个子元素才是有效的。

Answer 3

由于您在表的后面，它会被移动。如果你想复制它，就克隆它。另外，不要编辑outerHTML。校正片段

​

function myFunction() {
  var tabletr = document.getElementById("tbl1");
  var rowtr = tabletr.insertRow(1);
  rowtr.appendChild(document.getElementById("tbl2").cloneNode(true));
}

table,
tr,
td {
  border: 1px solid;
}

<table id='tbl1' style='background: lightblue;'>
  <tr>
    <td>table 1 - 1-1</td>
    <td>table 1 - 1-2</td>
  </tr>
  <tr>
    <td>table 1 - 2-1</td>
    <td>table 1 - 2-2</td>
  </tr>
</table>
<hr>
<table id='tbl2' style='background: lightgray;'>
  <tr>
    <td>table 2 - 1-1</td>
    <td>table 2 - 1-2</td>
  </tr>
</table>
<button onclick="myFunction()">Try it</button>

​