Попытка добавить кнопку на веб-страницу, используя JavaScript - PullRequest
Новая
       0

Попытка добавить кнопку на веб-страницу, используя JavaScript

1 голос
/ 26 февраля 2020

Я пытаюсь добавить кнопку на свою веб-страницу, используя JavaScript, но консоль выдает сообщение об ошибке:

сценариев. js: 35 Uncaught DOMException: Не удалось выполнить 'appendChild' на 'узле': разрешен только один элемент в документе. 

// 7: Create a <button> element, and set its text to 'Delete'
// Add the <button> inside the '.extra' <div>
const button = document.createElement('button');
button.innerHTML = "Delete";
const buttonPlace = document.getElementsByClassName('.extra')[0];
document.appendChild(button);
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/main.css">
  <title>Practice Manipulating the DOM</title>
</head>

<body>
  <div class="container">
    <h1></h1>
    <p class="desc"></p>
    <ul>
      <li><input> Play music</li>
      <li><input> Swim</li>
      <li><input> Bike ride</li>
      <li><input> Code</li>
    </ul>
    <div class="extra">
      <p>This is extra content you need to delete.</p>
    </div>
  </div>
  <script src="js/scripts.js"></script>
</body>

</html>

Есть идеи о том, что происходит? Спасибо за вашу помощь!

1 Ответ

2 голосов
/ 26 февраля 2020

Единственный элемент, который вы можете поместить в документ, - это <html> (который существует по умолчанию).

Если вы хотите добавить <button> на страницу, то вам нужно добавить его куда-нибудь else (и это должно быть потомком элемента <body>). 

const buttonPlace = document.getElementsByClassName('.extra')[0];

Вышеуказанное выглядит как место, куда вы хотите поместить кнопку, но вам нужно добавляйте его туда, а не к объекту document. 

buttonPlace.appendChild(button);

Обратите внимание, что в CSS . указывает на запуск селектора класса. Ваше имя класса не начинается с символа .. Вам нужно будет исправить это в точке, где вы звоните getElementsByClassName.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...