Creating And Inserting Dom Nodes

Objectives

By the end of this lesson, you'll be able to

  1. Create DOM elements programmatically
  2. Insert elements into the DOM
  3. Remove elements from the DOM

document.createElement()

Creating an element in JavaScript couldn't be easier. Simply call document.createElement(tagName), where tagName is the string representation of any valid HTML tag (e.g., 'p', 'div', 'span', etc.).

Open this lesson's index.html file in your browser or use httpserver to serve it temporarily. Once open, open up the browser's console. In the console, enter:

var element = document.createElement('div');

Type element. (or whatever you named your newly minted element), and explore the properties available. It's a living, breathing DOM element, but it doesn't yet appear in the DOM.

We can set properties on it:

element.innerHTML = 'Hello, DOM!';
element.style.backgroundColor = '#f9f9f9';

Feel free to set as many properties as you'd like — this is a good chance to look around and explore different properties of DOM elements!

But notice that no matter what properties we add, the element doesn't show up on the page. What gives?

appendChild()

To get an element to appear in the DOM, we have to append it to an existing DOM node. We can start as high up on the tree as document.body, or we can find a more specific element using any of the techniques we've learned for traversing the DOM. Let's append element to body to start:

document.body.appendChild(element);

If you've been following along, you should see "Hello, DOM!" on the page now (and it should have a light gray background).

We can continue to update element, since we have a reference to it:

element.style.textAlign = 'center';

And now our element's text is centered.

We can append elements to that element:

var ul = document.createElement('ul');

for (let i = 0; i < 3; i++) {
  let li = document.createElement('li');
  li.innerHTML = (i + 1).toString();
  ul.appendChild(li);
}

element.appendChild(ul);

Hm, that looks a bit ugly. Let's fix it

ul.style.textAlign = 'left';

That's better.

removeChild()

Now let's remove one of those lis.

ul.removeChild(ul.querySelector('li:nth-child(2)'));

Boom. Second element is gone.

What if we want to remove the whole unordered list (ul)?

element.remove()

We can just call remove() on the element itself:

ul.remove();

And it's gone!

Resources

View Creating And Inserting Nodes on Learn.co and start learning to code for free.

Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us