Question

如何选择一个div，然后在其下方创建一个新的div？

function addContainer(row)
{
  row++
  d3.select('body')
    .append('div')
    .attr('class', `#container${row}`)
    .attr("onclick", `addContainer(${row})`)
    .text("Container " + `${row}`)
}

<div id="container0" onclick="addContainer(0)" >Container 0</div>

<script src="https://d3js.org/d3.v5.min.js"></script>

一切正常，除了我希望添加的div恰好位于我单击的div下方而不是最底部的部分。因此，我的想法是，不用选择正文，而是选择单击的div的ID，然后附加一个新的div。但是，这会在div内而不是其下添加一个div。

那么我该如何将其附加到选择之外呢？还是有更好的方法呢？

Answer 1

这是一种方法：使用d3.insert。

由于在HTML元素上绑定事件this时出现了onclick问题，因此我将事件绑定和处理移到了JS部分。

这是我将<div>作为下一个兄弟添加到所选（单击）元素的方式： this.parentNode.insertBefore(this.cloneNode(deep), this.nextSibling)

代码：

d3.select('#container0').on('click', addContainer);

function addContainer(row)
  {
    if(!row) row = 0;
    row++
    d3.select(this).select(function () {
    		return this.parentNode.insertBefore(document.createElement('div'), this.nextSibling);
    })
      .attr('class', `#container${row}`)
      .on('click', function () { addContainer.call(this, row); })
      .text("Container " + `${row}`)
  }

<div id="container0">Container 0</div>

<script src="https://d3js.org/d3.v5.min.js"></script>

请注意，addContainer.call(this, row)会绑定选择时使用的this。

希望这会有所帮助。关于容器数字，它将+1添加到绑定元素的数字中。如果您希望容器 number 继续增加，只需在外部声明row并在调用函数时将其取出（因为这将有助于div s拥有唯一ID）。并检查DOM是否正确插入了元素。

D3.js-将对象附加到选择之外

1 个答案: