Add an element between existing elements
Question
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
insertBeforemethod, - to add an element between the names
BobandCesar
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
3 answers
solution1
0 2020-05-07 19:09:47
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);
solution2
0 2020-05-07 19:19:52
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>
solution3
0 2020-05-07 19:25:36
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 technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.