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>
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);
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
- to add a new element in the list of names, using the
insertBefore method,
- 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
Hi, I have updated the code and added a little explanation on how you can find any child’s index and then remove it.
Whoops, I messed up the last line. Check it again.
