Why does this D3 code add the element outside the body, instead of inside it?

Question

I\'m learning D3 and have come across an issue using the select operator.

Specifically, why does the following code add the

element outside th

Answer 1

As suggested in the comments, the way to do what you're trying to do is to use .selectAll(). The difference between .select() and .selectAll() is that .select() returns elements while .selectAll() returns elements grouped by ancestor. This then affects any subsequent .data() operations in terms of what the elements are appended to. From the documentation:

Grouping by selectAll also affects subsequent entering placeholder nodes. Thus, to specify the parent node when appending entering nodes, use select followed by selectAll:

d3.select("body").selectAll("div")