d3.select('.title') // returns a first selection // D3 convention: things that create a new selection are indented 2 spaces .append('div') // returns a NEW selection // D3 convention: things that modify current selection are // indented 4 spaces .html('Inventory SALE') .classed('red', true) .append('button') .style('display', 'block') .text('submit'); d3.select('.title') // defaults to inserting as last child, i.e. appending. .insert('button', 'a:first-child') .html('Flash event'); d3.select('.title') .insert('button', 'a:nth-child(4)') .html('Moar buttons'); /* The 1st argument to insert() is mostly like the ones passed to document.createElement(). */ d3.select('.action') .remove();