无法在Tr＆gt; Div

Question

我有2个表，当我尝试 appendChild 第二个表到table1（tbl1）tr时，table2（tbl2）autumaticaly删除<table...>标签：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

屏幕截图：

Answer 1

需要将div放入单元格。

＆＃13;

＆＃13;

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

＆＃13;

 import { InventoryService } from './providers/inventory.service';
    import { Component, OnInit, NgModule } from '@angular/core';

    @Component({
      selector: 'apk-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss'],
      providers: [InventoryService]
    })
    export class AppComponent implements OnInit {
      articles;

      constructor(private inventoryService: InventoryService) { }

      ngOnInit(): void {}
    loadEv= ($event) => {
    this.onGetItems($event.param1);
  }

onGetItems(amount: number){
console.log(amount);
/*-----------your implementation-----------*/
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

当您appendChild()第二个表格时，它会从DOM的当前位置移除，并插入您指向的位置。这就是它supposed to work的方式。

  

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

您最终也会使用无效的HTML。 <tr>元素的唯一有效子元素为<td>（或<th>），行必须至少有一个这些子元素才有效。

Answer 3

由于您要附加表格，因此会移动它。如果要复制它，请克隆它。另外，不要编辑outerHTML。已修正的代码段

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

{'a': ['a'], 't': ['the','the'], 'l': ['low','lazy']}

＆＃13;

＆＃13;

＆＃13;