JavaScript createElement() not affecting HTML

Question

I am following along with a tutorial to create an audio player. The index.html file has a class named audioPlayer as shown below:

<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    <body>
        <div class="audioPlayer"></div>
        <script src="AudioPlayer.js"></script>
    </body>
</html>

The audioPlayer class is used as a querySelector in the JavaScript code below in order to attach additional elements:

class AudioPlayer {
    constructor(selector = '.audioPlayer', audio = []) {
        this.playerElement = document.querySelector(selector);
        this.audio = audio;
        this.currentAudio = null;
        this.createPlayerElements();
    }

    createPlayerElements() {
        this.audioElement = document.createElement('audio');
        const playListElement = document.createElement('div');
        playListElement.classList.add('playlist');

        this.playerElement.appendChild(this.audioElement);
        this.playerElement.appendChild(playListElement);
    }
}

let player = new AudioPlayer()

At this point the tutorial creator is able to access index.html on a local web server and verify that the audio and div class="playlist></div elements have been appended to the original selector. When I run a local server (http-server installed globally via npm) and inspect the page, this has not occurred. The audioPlayer element is unchanged. The console shows no error messages, and I am able to inspect the script file in the browser so I know the path is correct.

The tutorial I am following can be viewed on YouTube. While the tutorial is 30 minutes long, the problem I have encountered should be reproducible by following only the first 5 minutes. The tutorial source code contains a dist directory and package.json showing parcel as a dependency.

Is it possible to create elements as attempted using only vanilla JavaScript, and if so, what am I missing?

There are many similar posts on SO. In order to avoid having this question marked as a duplicate, I will list the posts that I have carefully read and have not found pertinent to my situation:

After the class definition, I've added `let player = new AudioPlayer()`. Sorry the original code for this question did not include this, I have updated. — John Harrington, Jul 17 '22 at 16:22
The video you referenced did include this in a separate file. See my answer. So, what happens now? Have you run the code with this change? — trincot, Jul 17 '22 at 16:23
I just tried your code, including the instantiation. It appears to run fine, and creates dom elements. Prove it to yourself by adding `playListElement.innerHTML = '
I am the playlist element
'` — danh, Jul 17 '22 at 16:25

score 1 · Accepted Answer · answered Jul 17 '22 at 16:23

It seems you didn't (first) have the code that actually creates an instance of your AudioPlayer class, so neither constructor() nor createPlayerElements() gets executed.

In the video you referenced, check again what is discussed at around 4:10-4:30.

In an app.js file enter:

import AudioPlayer from './AudioPlayer';

const audioPlayer = new AudioPlayer();

Below the audio element in the body of your HTML, don't include AudioPlayer.js, but this app.js. So:
```
<div class="audioPlayer"></div>
<script src="app.js"></script>
```

JavaScript createElement() not affecting HTML

1 Answers1