Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript DOM Scripting By Example Editing and Filtering Names Moving to an Editing State

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

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,701 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