Why D3 provide methods for us to change the internals of nodes,
so for example I want to change the content,
is hard using those API to basically just add a new element to
the list of elements that you already have or
remove elements that you have without removing everything.
So, D3 provides us with other APIs that help us
to add and remove those elements and that's what we want to talk on this video.
So, imagine that I have a list like this.
I have item one to item three and now I want to add a newer item, the item four.
So we can append a new item at the end of this list and in order to do that,
we can use an API that D3 provide us called append.
So selection is the parent,
whatever node I'm going to insert a new element inside
it and then tag is going to be the name of the new element.
So if I want to add a new "li",
tag is going to be "li" and note that this element is going to come empty,
without any content inside.
But then we can use the API that we already know
like.text and.html to change the content inside.
So, for example, imagine that I have my list as I showed before.
So if I want to add a new item,
I can select "ul".
So this is the parent,
it's the element that's going to receive the new item,
then I'm going to do.append "li".
So you're going to create a new element of the type""li"" but it's element is blank.
So now I can do.text to set the content inside this element,
and the result is going to be something like this.
We're going to add a new item at the end and the text inside
this item is going to be the text that I specified in my call.
What about removing?
So, if I want to remove some elements,
I can just select them and then after my selection, I can call.remove.
So here note that we are going to select the elements that we want to
remove and then call call.remove to remove those elements.
So for example, imagine that I do d3.selectAll ("li") in my previous lists.
So basically I'm selecting li's inside the list and then I'll call.remove.
This is going to remove all the elements in the list.
So if I had a list like this,
we're going to end up with an empty list.
If I do just select instead of select all,
we're going to end up with just the first one being removed.
Because remember that select finds only the first reference and not all the references.
But if I use "select all" I'm going to remove all of
them but I could use also a class to remove only
those that had specific class or an ID
to remove only the element that contains any specific ID.
So remember, we can use append to add information to
our page in a way that is not destructive of what we had
before especially if we have a list and we want to add
more elements to this list and we can use remove
to remove elements that we don't want to be present on
the screen anymore and as always we use selection to select.
For append, you have to select the parent element,
the element that's going to receive the new value and for remove,
you have to select the elements that you want to remove.