Javascript 如何附加一个新的div元素，它是使用d3创建的第一个div的同级元素？

基本上，我想在其他div之后追加一个新div：不是子div，而是创建的第一个div的兄弟

使用下一个

code

，我在h4中得到一个div：(

我得到了所需的div数。但是，带有class

new div

的新div元素在

h4

标记内

我想按以下顺序创建一些内容：

<!-- Divs created with d3 -->
<div class='mydiv'>
  <h4>Title</h4>
</div>
<div class='new-div'></div>

但结果是一样的

---

我知道这个过程中的层次结构不仅很重要，而且它会根据每个步骤构建标记。有没有办法创建一个新的div元素，该元素是创建的第一个div的同级元素？

尝试以下方法：

let divs = content.selectAll('div')
    .data(data.keys) // It contains 8 objects, will return 8 divs.
    .enter()
    .append('div')
    .attr('class', 'mydiv'); // stop here

// title
divs.append('h4')
  .text((d) => {
    return d.title
  });

// child div
let childDivs = divs.append('div')
  .attr('class', 'mychilddiv');

// second child div
let childDivs2 = childDivs.append('div')
  .attr('class', 'mychilddiv2');

// third child div
let childDivs3 = childDivs2.append('div')
  .attr('class', 'mychilddiv3');

// add h4 to second child
childDivs2.append('h4')
.text('second child')

您可以像这样随意链接。

您可以使用

。选择（函数（）{返回this.parentElement.parentElement；}）

在追加第二个

div

之前。在这种情况下，您不会中断链接，您的选择将返回父元素，因此第二个追加的

div

将与第一个追加的

div

同级。请检查下面的演示：

var data=[{title:'foo'，country:1}，{title:'bar'，country:2}]；
设divs=d3.select（'body'）
.selectAll（'div'））
.数据（数据）
.输入（）
.append（'div'））
.attr（'class'，'mydiv'）
.append（'h4'）
.文本（（d）=>{
返回d.title
})
.select（函数（）{返回this.parentElement.parentElement；}）
.append（'div'））
.数据（数据）
.attr（'class'，函数（d）{return'country-'+d.country；}）
.text（函数（d）{return d.country}）；

.mydiv{
宽度：100px；
高度：20px；
边框：1px纯绿色；
背景颜色：粉红色；
显示：内联块；
}
.country-1、.country-2{
宽度：100px；
高度：20px；
边框：1px纯绿色；
背景色：浅绿色；
显示：内联块；
}
h4{
保证金：0；
}

只想让您知道，（在撰写本文时）创建了以下结构：

<div class='mydiv'>
    <h4>Title</h4>
</div>
<div class='mydiv'>
    <h4>Title</h4>
</div>
<div class='new-div'></div>
<div class='new-div'></div>

---

谢谢，我编辑了这个问题，我想我解释得不好。现在这个例子中，新的div元素不在

h4

标记中，但在第一个div的子元素中。我正在尝试创建这个新div，它是创建的第一个div的兄弟。谢谢，@pirsThanks，@mikhail。所有在

div

之后创建的div都像

mydiv

c例如，将是子类？或者是否有方法在

mydiv

类下面创建新div？现在它可以工作了。但是只向每个

new div

添加数据中的最后一个值。我会弄清楚。@ramiortmenta“但是只添加最后一个值”-你是什么意思？对于这个新的div，我还插入了一个

类和
id
从输入的数据中提交。所有同级都有相同的值，从数据中的最后一个对象提交。例如：
…
@ramitormenta哦，好的。我更新了答案，请检查。你应该使用
.data（数据）
方法，请再次为其设置。
let divs = content.selectAll('div')
    .data(data.keys) // It contains 8 objects, will return 8 divs.
    .enter()
    .append('div')
    .attr('class', 'mydiv'); // stop here

// title
divs.append('h4')
  .text((d) => {
    return d.title
  });

// child div
let childDivs = divs.append('div')
  .attr('class', 'mychilddiv');

// second child div
let childDivs2 = childDivs.append('div')
  .attr('class', 'mychilddiv2');

// third child div
let childDivs3 = childDivs2.append('div')
  .attr('class', 'mychilddiv3');

// add h4 to second child
childDivs2.append('h4')
.text('second child')

<div class='mydiv'>
    <h4>Title</h4>
</div>
<div class='mydiv'>
    <h4>Title</h4>
</div>
<div class='new-div'></div>
<div class='new-div'></div>