Trying to add a button to a webpage using JavaScript

Question

I'm trying to add a button to my webpage using JavaScript but the console is giving me an error saying:

scripts.js:35 Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

// 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>

Any idea on what's going on? Thanks for your help!

button.innerHTML -> button.textContent? Also, you're inserting into html not body... try using document.body.appendChild instead. — evolutionxbox
– evolutionxbox, Commented Feb 26, 2020 at 16:12
There should not be a dot in the class name passed to getElementsByClassName(). — Turnip
– Turnip, Commented Feb 26, 2020 at 16:14

Quentin · Accepted Answer · 2020-02-26 16:13:58Z

2

The only element you can put on the document is <html> (which is there by default).

If you want to add a <button> to the page, then you need to add it somewhere else (and that should be as a descendant of the <body> element).

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

The above looks like a the spot you want to put the button, but you need to append it there and not to the document object.

buttonPlace.appendChild(button);

Note that in CSS, the . indicates a start of a class selector. Your class name does not start with a . character. You'll need to correct that at the point you call getElementsByClassName.

answered Feb 26, 2020 at 16:13

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Quentin Over a year ago

@Jackson — That what I said.

Quentin Over a year ago

@Jackson – Yes, that's what I said.

Collectives™ on Stack Overflow

Trying to add a button to a webpage using JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related