Appending Elements

Learn how to insert new elements into existing elements with D3.

In some cases, we may need to add new elements to the document. That is completely possible with selections. Let’s say we want to add a <p> element with D3. We can append an element by chaining the append() method on the selection.

This method is a part of the D3 selection library. Selection objects come with a method called append(). We can directly chain this function after selecting an element.

In the code snippet above, we are performing a selection first. We can not insert a new element until D3 knows where to insert it. The object returned by the select() method is a selection object that comes wrapped with methods and properties for interacting with the selection.

The append() will insert a new element into the current selection. In this instance, an element will be inserted into the ...