Solution 1 :

I think the code goes like this

here is the documentation I’m following

here’s a snippet

// create a li element
    const node = document.createElement('li')
// insert the name bobby as innerHtml value of li node
    node.innerHTML = 'bobby'
// get the ol element 
    const list = document.querySelector('#players ol')
// get all the list items under ol
    const items = document.querySelectorAll('#players ol li')
// from what we know, cesar is that last element on the list
    const cesar = items[items.length - 1]
// we got all we need the node that we wanted to insert
// the list item where we want the node to be inserted before
// and the ol list element which holds to be the parent of them all
// So we insert it.. using the syntax below
    const inserted = list.insertBefore(node, cesar)
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <section id="players">
      <h1>Players</h1>
      <ol>
        <li>Alice</li>
        <li>Bob</li>
        <li>Cesar</li>
      </ol>
    </section>
</body>
</html>

Solution 2 :

const textnode = document.createTextNode('bobby');
const node = document.createElement('LI');
const ol = document.getElementsByTagName("OL")[0];
node.appendChild(textnode) 
ol.insertBefore(node,ol.children[2]);

console.log("This is the content of ol.children:");console.log(ol.children);
console.log("Now if you want to delete Bob, look at his index")

ol.removeChild(ol.children[1]);
<body>
    <section id="players">
      <h1>Players</h1>
      <ol>
        <li>Alice</li>
        <li>Bob</li>
        <li>Cesar</li>
      </ol>
    </section>
    <script src="index.js"></script>
  </body>

Solution 3 :

The inserBefore() method requires two arguments as input. First the node to insert and as second the node where the to-be-appended node has to be inserted before.

So you’ll need to select the <ol> and the third node in that element. Then call the insertBefore method on the <ol> node and insert the new node, before the thrid node in the list.

// Get the <ol> element
const listNode = document.querySelector('#players ol');

// Get the third <li> in the <ol> element.
const thirdListItem = listNode.children[2];

// Create the new node.
const textnode = document.createTextNode('bobby');
const node = document.createElement('LI');
node.appendChild(textnode);

// Now insert the new node in the <ol> before the third <li>
listNode.insertBefore(node, thirdListItem);

Problem :

I’m learning HTML and JavaScript currently, and I’m having trouble understanding nodes/elements, and how to use them. I’m taking an online course which corrects my code using a bot. This is in my HTML file with what is required:

<body>
    <section id="players">
      <h1>Players</h1>
      <ol>
        <li>Alice</li>
        <li>Bob</li>
        <li>Cesar</li>
      </ol>
    </section>
    <script src="index.js"></script>
  </body>

The instructions are

  1. to add a new element in the list of names, using the insertBefore method,
  2. to add an element between the names Bob and Cesar

I want to insert the name 'bobby' between Bob and Cesar

This is my code so far, but I don’t know how to format it properly:

const textnode = document.createTextNode('bobby')
const node = document.createElement('LI')
node.insertBefore()
node.appendChild(textnode) 
document.getElementById('players').appendChild(node)

The bot’s output is:

index.js
    ✓ exists
    ✓ is valid JavaScript
    ✓ adds a list item
    ✓ makes it so that the first list item contains “Alice”
    ✓ makes it so that the second list item contains “Bob”
    1) makes it so that the fourth list item contains “Cesar”
    ✓ uses insertBefore

Comments

Comment posted by n-th child selector

You can make use of

Comment posted by developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore

developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore

Comment posted by h3t1

Hi, I have updated the code and added a little explanation on how you can find any child’s index and then remove it.

Comment posted by Emiel Zuurbier

Whoops, I messed up the last line. Check it again.

By

Leave a Reply

Your email address will not be published. Required fields are marked *