在现有元素之间添加元素
我目前正在学习HTML和JavaScript，但我在理解节点/元素以及如何使用它们时遇到问题。我正在参加一个在线课程，该课程使用机器人更正我的代码。这是在我的HTML文件中，其中包含所需的内容：
<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>
说明是
使用该方法在名称列表中添加新元素，
insertBefore在名称和之间添加元素
BobCesar
我想在 和 之间插入名称'bobby'BobCesar
到目前为止，这是我的代码，但我不知道如何正确格式化它：
const textnode = document.createTextNode('bobby')
const node = document.createElement('LI')
node.insertBefore()
node.appendChild(textnode)
document.getElementById('players').appendChild(node)
机器人的输出为：
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回答
-
慕尼黑的夜晚无繁华
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> -
杨__羊羊
我认为代码是这样的这是我关注的文档这是一个片段// 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> -
炎炎设计
inserBefore（） 方法需要两个参数作为输入。首先是要插入的节点，其次是必须之前插入要追加的节点的节点。因此，您需要选择该元素中的第三个节点。然后在节点上调用该方法，并在列表中的第三个节点之前插入新节点。<ol>insertBefore<ol>// Get the <ol> elementconst 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);
随时随地看视频慕课网APP
相关分类
JavaScript