javascript - How to append multiple child elements to a div in d3.js? -

i'm trying append 2 spans div using following code:

    d3.select("#breadcrumb")             .append("span")             .attr("class","breadcrumb-link")             .text(d.name)             .append("span")             .text("/"); 

but adds elements like:

<div id="breadcrumb">     <span>         <span>         </span>     </span> </div> 

i want add spans siblings:

<div id="breadcrumb">     <span>     </span>      <span>     </span> </div> 

i know can done first selecting div , using 2 statements each span. can in single chained statement?

d3.js based on idea of data-driven documents. said, typically you'll have data array gonna join selection.

with in mind try simple hack joining selection d3.select("#breadcrumb") "artificial" array [1, 2]. this:

d3.select("#breadcrumb").data([1, 2]).enter().append('span')...

note, call of enter().

if wanna set different class attributes, stuff data data array.