JavaScript: Adding and Removing Nodes

An easy reference for setting up basic user interaction on click events

Basic recipe for getting multiple items to appear on click

If you are programming in JavaScript for any length of time, you will most certainly want to add elements to the DOM on click events. For me, this is something that most apps that I create requires, but I end up having to refer to the documentation on a constant basis. So to simplify things, I wanted to create a useful reminder that would help me to keep that information rolling around in my head.

Adding to the DOM

In almost all use cases, I want to create elements that will display the inputs that I put in the input tag. For reference sake, this is what I’m trying to make:


Notice the adding of a list element with attached buttons

So here is my approach:

  1. First declare you variables and get them by either id or by querySelector. By my logic, you’ll need to get the parent div, the input, as well as the add and remove buttons.

So your set up to start might look something like this:

An important detail to note is that I’ve decided to get the button with querySelector, which normally only returns the first element that matches this. So to get around this, I’ve asked for both the element as well as the class name.

2. Create an EventHandler

At this point, we need to start to create an interaction that does what we want. So the first thing we want to do is to be able to create an event handler on the specified element. In this case, this would be the addItem button that we declared a moment ago.

Inside of that, we want to first make sure that we are getting the input value. So to test, I’ll create my event handler and then make sure that I’m getting my input value on click.

making sure we are getting the input value.

3. Create the element type and make sure we are making our new text the value of our input. This will require us to declare a variable and create an Element, and then use the textContent method to show that content.

4. Append to the parent div

From there, all we have to do is append it to the parent using the appendChild method. If we want to add any styling, all we have to do is to apply the setAttribute method. Alternatively, we can also add the styling for these elements in css. The trick with that, however, is to make sure that you include either the correct className or Id to match the one you’ve created. In any case, here is what you could have made.

Removing Nodes

Removing Nodes is a very similar process to adding nodes. In my case, I have added an additional button in the html because this seems to be more like the natural behavior you would have with an interface. So here are my steps:

  1. create another event handler for removing buttons

Like before, I want to add the item that I want to create the interaction with onto the event. So I’ve used my removeButton variable and applied it as below.

2. grab the element that you want to remove

Then I want to create a local variable that will grab the particular element that I’ve created and remove it. In my case, I want to remove elements from the end of the list, so I’m going to apply a method from CSS that will do just that.

3. apply the removeChild method from the parent on to the child div.

Once again, I’m going to put the parent on to the child, but with the removeChild method. Here is what I should have in the end.

Adding Additional Elements on Click Events

Often is the case, I will often want to add a button or some other features on a click event along with some content, so in that case, I often find it easier to add my code with the help of a function that I can call inside of my eventhandler. So with that, here are my steps:

  1. Create a function and an a li argument to it.

2. After doing that, I want to declare a variable and then add a createElement, ClassName, and a textContent to this particular element I’ve created.

3. Once you’ve completed this task, it’s usually a good idea to then append it to the parent. In this case, I’ll apply the argument I’ve created. Once I’ve done that, I’ll go ahead and call this method in my event handler.

Notice I’ve called the function just in the middle there.

And there you have it. That is basically the main approach to adding additional elements that I normally take. I hope that this was useful to someone, and if you know any other way of doing it with just javascript, I’d love to hear it.