How to close and just later add HTML element in D3.JS?

Question

Now I have the next code:

d3.select("#commiterStatsContainer")
        .append("div").attr("class", "chip")
        .append("img").attr("src", committers[i].avatar)
        .text(committers[i].login);

but it adds my text inside of the <img>...</img> tag. How can I close <img> and just later to add my text?

Answer 1

The append method returns a new selection containing the appended elements (See documentation). So following your code:

d3.select("#commiterStatsContainer") // initial selection
  .append("div").attr("class", "chip") // new selection with a div
  .append("img").attr("src", committers[i].avatar) // new selection of img in that div
  .text(committers[i].login); // text for the img tag in the div.

Instead, try:

var div = d3.select("#commiterStatsContainer")
  .append("div").attr("...");

div.append("img").attr("....");
div.append("p").html("....");

The variable div is a selection of the newly created div, you then can use div.append() to append new elements to that div.