JavaScript DOM Scripting By Example Editing and Filtering Names Filter Invitees Who Have Not Responded

Marcos Raj
PRO
Marcos Raj
Pro Student 5,979 Points

What if I want to call the nth child of element from the LI?

const span = li.firstElementChild;
input = document.createElement('input');
type = 'text';
value = span.textContent;
insertBefore(input, span);
li.removeChild(span);
target.textContent = 'save';

in this we are replacing input tag from the span tag, and span tag is in the first place.

What if i want something to replace which is neither in the first place nor in the last place, but somewhere in the middle?

element.insertBefore() // with this method can i insert more than one item at time.

1 Answer

Hi there Marcos!

You can simply combine css selector inside querySelector. As for example:

<ul id="list">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
</ul>
var element = document.querySelector('#list li:nth-child(2)');
console.log(element);

This will save from to many unnecessary lines of code.

Best regards.