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 DOM Scripting By Example Editing and Filtering Names Moving to an Editing State

Sergi Oca
Sergi Oca
7,981 Points
Posted by Sergi Oca
Sergi Oca
7,981 Points

Code could be simpler?

Great course so far, but I found this part to overly complicate things a bit, Instead of:

    } else if (button.textContent === 'edit') { 
       const span = li.firstElementChild;
       const input = document.createElement('input');
       input.type = 'text';
       input.value = span.textContent;
       li.insertBefore(input, span);
       li.removeChild(span);
       button.textContent = 'save';
      }

Couldn't we just use a template like:

   } else if ( e.target.className == "editButton"){
        const text = li.firstChild.textContent;
        li.firstChild.innerHTML = `<input type="text" placeholder= ${text} > </input>` ; 
        button.textContent = 'save';  
    }

Also, is firstElementChild "better" in most cases than firstChild? I ran a test and firstChild seems faster, but I don't know much about browser supports yet.

Jonathan Kuhl
Jonathan Kuhl
26,133 Points
Jonathan Kuhl
Jonathan Kuhl
26,133 Points

I think he's assuming that we don't know template literal strings.

And if I understand it correctly, he said firstChild performs better, but doesn't necessarily return an HTML element. There was a point where he showed how it could return a text string that the browser nestled between elements to make space. firstElementChild will only return HTML elements.

1 Answer

David Kanwisher
David Kanwisher
9,751 Points
David Kanwisher
David Kanwisher
9,751 Points

Thanks for sharing, looks great!
This will put the input INSIDE of the span, which is a little different than the exercise, but can be worked with.
One small correction, in order to match the lesson: instead of placeholder=, it should be value=

cheers