Question

我一直在尝试将 divs 附加到另一个 div 标记下面的DOM上，但它们都附加在脚本标记之后。＆＃xA; HTML：

＆＃XA;＆＃XA;

 <代码>＆LT;身体GT;＆＃XA; ＆lt; div class =“bg”＆gt; ＆LT; / DIV＆GT;＆＃XA; ＆lt; script src =“d3.v4.js”＆gt;＆＃xA; ＆lt; script src =“scripts.js”＆gt;＆＃xA;＆lt; / body＆gt;＆＃xA;

＆＃xA;＆＃xA;

JavaScript：

＆＃xA;＆＃xA;

  var dataset = [10,20,30];＆＃xA; d3.select（“body”）。selectAll（“div”）。data（dataset）.enter（）。append（“div”）。attr（“class”，“bg”）＆＃xA;

＆＃XA;＆＃XA;

CSS：

＆＃XA;＆＃XA;

 <代码> div.bg {＆＃XA;背景色：粉红色; ＆＃XA; display：inline-block; ＆＃XA;身高：100px; ＆＃XA; width：10px;＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

现在在DOM上出现这种方式：

＆＃xA;＆＃ xA;

 ＆lt; body＆gt;＆＃xA; ＆lt; div class =“bg”＆gt; ＆LT; / DIV＆GT;＆＃XA; ＆lt; script src =“scripts.js”＆gt;＆＃xA; ＆lt; div class =“bg”＆gt; ＆LT; / DIV＆GT;＆＃XA; ＆lt; div class =“bg”＆gt; ＆LT; / DIV＆GT;＆＃XA; ＆lt; div class =“bg”＆gt; ＆LT; / DIV＆GT;＆＃XA; ＆lt; div class =“bg”＆gt; ＆LT; / DIV＆GT;＆＃XA;＆LT; /体＆GT;＆＃XA;

＆＃XA;

Answer 1

因为您的元素是在创建DOM之后（执行脚本时）创建的......所以默认情况下它们会追加到最后一个。通过在容器中附加元素来修复它，如下所示：

<body>
   <div class="container"> </div>
   <script src = "d3.v4.js">
   <script src = "scripts.js">
</body>

CODE

var dataset = [ 10, 20, 30 ];
d3.select(".container").selectAll("div").data(dataset).enter().append("div").attr("class", "bg")

CSS

div.bg{
 background-color:pink; 
 display: inline-block; 
 height: 100px; 
 width:10px;
}

输出

<body>
   <div class="container">
      <div class="bg"> </div>
      <div class="bg"> </div>
      <div class="bg"> </div>
   </div>
   <script src = "scripts.js">

</body>

为什么HTML元素追加在<script>标记之后

1 个答案: