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

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
218,760 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
218,760 Points

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