Using insertadjacenthtml and contents not being generated to the DOM

Question

I'm trying to write a toast notification for users on a small website. I currently have a function that initializes this code and I was expecting this function to generate a container in which my toast notification will be placed.

Here is my initialization function.

let toastContainer;
(function initToast () {
    document.body.insertAdjacentHTML('afterbegin', '<div class="toast-container"></div>');
    toastContainer = document.querySelector('.toast-container');
})()

I was expecting this to create a <div class='toast-container' in the DOM, but this is not appearing in the DOM. I was thinking it may be an issue with the quotes I'm using?

Your code as written, so long as it runs when the DOM has been completed, does work. What makes you think it doesn't? — Pointy, Apr 04 '23 at 21:14
@Pointy Do you even need to wait for the DOM to be completed? `document.body` always exists. — Barmar, Apr 04 '23 at 21:14
@Barmar yea I wasn't sure that'd be the case, not having ever had occasion or motivation to test it :) — Pointy, Apr 04 '23 at 21:15
When I go to inspect the page, I do not see a
. I should be able to see this in the DOM, even with no content inside, right? I scrolled down and see this error now. Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null at initToast (indexdev.js:17) at indexdev.js:19 — zanzibar, Apr 04 '23 at 21:16
Yes, and it will be there. How exactly are you "inspecting" the page? The "view source" option will *not* show it, but the browser debugger DOM inspector will. — Pointy, Apr 04 '23 at 21:18
The error is what @Barmar and I were discussing in comments above. It means that `document.body` is `null` when your code runs. If you move the containing ` — Pointy, Apr 04 '23 at 22:01
Or [Why is document.body null in my javascript?](https://stackoverflow.com/q/9916747/215552) if you prefer. — Heretic Monkey, Apr 04 '23 at 22:57

tatactic · Answer 1 · 2023-04-04T21:59:09.017

-1

Your container is empty but your code needs some change.

Wait the DOMContentLoaded before to call your function.

Otherwise You may have document.body is null in the console

        window.addEventListener("DOMContentLoaded",initToast)
        let toastContainer;
        function initToast () {
            document.body.insertAdjacentHTML('afterbegin', '<div class="toast-container">this is a div</div>');
            toastContainer = document.querySelector('.toast-container');
        }

        .toast-container{
            background-color: antiquewhite;
        }

edited Apr 04 '23 at 21:59

answered Apr 04 '23 at 21:46

tatactic

1,379
1
9
18

We have many hundreds of duplicates of this answer, if indeed this is the problem the OP is having. – Heretic Monkey Apr 04 '23 at 22:04
@HereticMonkey I agree of course, but this question is *slightly* interesting because the code implicitly expected `document.body` to exist before the DOM was built; it wasn't about searching the DOM. – Pointy Apr 04 '23 at 22:53
@Pointy Meh. `document.body` is just syntax sugar for `document.querySelector('body')`. ;) Also, [Why is document.body null in my javascript?](https://stackoverflow.com/q/9916747/215552) – Heretic Monkey Apr 04 '23 at 22:54
@HereticMonkey yes that's what I've kind-of assumed for a long time, but apparently that was in question if you check the comments. – Pointy Apr 04 '23 at 22:56
2

@Pointy Not quite; Barmar assumed `document.body` always existed, but it doesn't, if the code runs in the ``, both `document.body` and `document.querySelector('body')` will return null. – Heretic Monkey Apr 04 '23 at 23:00
@Pointy Your suggestion of moving my to the end of solved my issues! Thank you so much! – zanzibar Apr 04 '23 at 23:13

Using insertadjacenthtml and contents not being generated to the DOM

1 Answers1