Why can't I create html from javascript?

Question

This is my javascript code(create.js):

var stuff = document.querySelector(".stuff");


var item = document.createElement('div');
item.className = 'item';

stuff.appendChild(item);

and this is my HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sound Create</title>
    <script src="create.js"></script>
</head>
<body>
    <div class="stuff">

    </div>

</body>
</html>

When I go on Developer Tools, no code is added. Thank you!

`getElementsByClassName()` returns a **list** of elements. You have to operate on each one in the list individually. — Pointy, May 01 '20 at 13:41
Try `stuff[0].appendChild(item);` as your last line of JS. Does that work? — Dcdanny, May 01 '20 at 13:46
No. It does not work. It is giving me "Uncaught TypeError: Cannot read property '0' of null" — themiscoding, May 01 '20 at 13:48
Your '` element is at the top of the page so it is being run before the HTML below it is added to the page, hence your `div.stuff` doesn't yet exist. Possible suggestions: Put the ` — Dcdanny, May 01 '20 at 13:56

score -1 · Answer 1 · answered May 01 '20 at 13:49

-1

When you call "getElementsByClassName", you will get a LIST of HTML elements, even if it contains only one element. So the right way is:

document.getElementsByClassName("stuff")[0];

Another way is using id. It's like , in js file, use document.getElementById('staff'). It returns the element directly, because id is always unique.

answered May 01 '20 at 13:49

Chris.Z

51
5

1

Thanks for trying to help, but it is giving this error:Uncaught TypeError: Cannot read property 'appendChild' of null at create.js:6 – themiscoding May 01 '20 at 13:54

Why can't I create html from javascript?

1 Answers1