Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Making Changes to the DOM Appending Nodes

Samantha Atkinson
seal-mask
.a{fill-rule:evenodd;}techdegree
Samantha Atkinson
Front End Web Development Techdegree Student 36,955 Points
Posted by Samantha Atkinson
.a{fill-rule:evenodd;}techdegree
Samantha Atkinson
Front End Web Development Techdegree Student 36,955 Points

Order of statements.

Why didn't Guil place the append statement after the statement that creates a li item and above the statement that inserts the text to the new li item?

addItemButton.addEventListener('click', () => {
   let ul = document.getElementsByTagName('ul')[0];
  let li = document.createElement('li');
   ul.appendChild(li);
  li.textContent = addItemInput.value;

});

Ā  Above is my code. I thought it would be logical to create element, append element and then provide the text to be placed in the new li item. Is above the wrong logic? It works but I want to make sure I'm not messing up the logic part.

1 Answer

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

It's not critical, but it's a good practice to completely construct a new element before adding it to the DOM. There's a slight chance of a momentary visual artifact if something is altered while it's already on the page.