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,131 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,700 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