使用insertBefore将HTML表插入到正确的子div中

Question

我有以下代码，使用insertBefore将表插入到div中，但我正在努力使表的定位正确:

//function creates standard HTML table   
const table = createTable({ data, propertyId });
let wrapper = document.querySelector(classes.propertySummary);
wrapper.insertBefore(table, wrapper.children[1]);

在DOM中产生以下内容:

<div class="summary">
<div>Where my table should sit inside</div>
<table></table>
<div></div>
</div>

有人能帮忙吗?

Answer 1

wrapper.children[1]返回<div class="summary">内部的第二个div。insertBefore()在调用insertBefore()的元素中插入一个元素，在本例中wrapper返回<div class="summary">。提供给insertBefore()的第二个参数决定了第一个参数所放置的子节点列表的位置。

TABLE在第二个DIV.children[1]之前插入，将TABLE定位在第一个DIV之后，而不是在第一个DIV内。

要到达那里，只需再深挖一点。有一种方法:

let wrapper = document.querySelector(classes.propertySummary + " div");

将+ " div"附加到querySelector()后，返回".summary div"。这将选择<div class="summary">中的第一个DIV。

输出:

<div class="summary">
<div>
Where my table should sit inside
<table></table>
</div>
<div></div>
</div>

确保classes.propertySummary返回".summary"-注意前面的点。如果没有，则querySelector()使用"." + classes.propertySummary + " div"。

const classes = {"propertySummary": ".summary"}, data = "", propertyId = "";
function createTable (obj) {
return document.createElement("table");
}
//function creates standard HTML table   
const table = createTable({ data, propertyId });
let wrapper = document.querySelector(classes.propertySummary + " div");
wrapper.insertBefore(table, wrapper.children[1]);

<div class="summary">
<div>Where my table should sit inside</div>
<div></div>
</div>

wrapper.insertBefore(table, wrapper.children[1]);

…是多余的。appendChild():

wrapper.appendChild(table);

…生成相同的结果。