Добавить элемент между существующими элементами - PullRequest
Новая
       5

Добавить элемент между существующими элементами

0 голосов
/ 07 мая 2020

Я изучаю 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>

Инструкции:

  1. , чтобы добавить новый элемент в список имен, используя insertBefore метод,
  2. , чтобы добавить элемент между именами Bob и Cesar

Я хочу вставить имя 'bobby' между Bob и Cesar

Это мой код, но я не знаю, как его правильно отформатировать: 

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 ]

0 голосов
/ 07 мая 2020 

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>
0 голосов
/ 07 мая 2020

Я думаю, что код выглядит следующим образом

вот документация Я следую

вот фрагмент 

// 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>
0 голосов
/ 07 мая 2020

Метод inserBefore() требует ввода двух аргументов. Сначала узел для вставки, а затем узел, в который должен быть вставлен добавляемый узел.

Итак, вам нужно выбрать <ol> и третий узел в этом элементе. Затем вызовите метод insertBefore на узле <ol> и вставьте новый узел перед третьим узлом в списке. 

// 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);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...