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

Daniel McHugh
Daniel McHugh
1,821 Points

Can someone walk me through exactly what we did here in terms of what caused what?

Okay, so the "span" tag is just a tag to convert a text element to an html element.

ul.addEventListener('click', (e) => {
  if (e.target.tagName === 'BUTTON') {
    const button = e.target;
    const li = button.parentNode;
    const ul = li.parentNode;
    if (button.textContent === 'remove') {
    ul.removeChild (li);
    } else if (e.target.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';
    } else if (e.target.textContent === 'save') {
      const input = li.firstElementChild;
      const span = document.createElement('span');
      span.textContent = input.value;
      li.insertBefore(span, input);
      li.removeChild(input);
      button.textContent = 'edit';
    }
  }
});

Where it loses me is here. what does this piece of code do?

const span = li.firstElementChild;

And these pieces are also confusing to me.

  li.insertBefore(input, span);
  li.removeChild(span);

Is it effectively putting the new input and removing the old one? What is the span tag doing in each of these?

And what does reversing these lines of code do?

  span.textContent = input.value;
  li.insertBefore(span, input);

1 Answer

Steven Parker
Steven Parker
200,430 Points

It seems like you have the right idea already, but perhaps this will make it a bit more clear:

const span = li.firstElementChild; :point_left: gets the first element inside the "li" (probably a "span" :wink:)

You were right about these lines putting in the new "input" and removing the old "span":

li.insertBefore(input, span); :point_left: put the new "input" in front of the "span" element already there
li.removeChild(span); :point_left: then, the "span" element is removed from the document

And as you expected, these other lines do just the reverse by adding a new "span" and removing the "input":

span.textContent = input.value; :point_left: copy the text from the "input" into the new "span"
li.insertBefore(span, input); :point_left: then put the new "span" in front of the old "input"
li.removeChild(input); :point_left: finally, delete the "input"

Could li.appendChild(span) work instead of li.insertBefore()???

Steven Parker
Steven Parker
200,430 Points

It would add it, but it would appear in a different place (at the end).