Insert HTML to a div in a tampermonkey script

Question

How do I insert HTML to a div in a tampermonkey script? I've tried

var htmlll= `
<button>hi</button>
`
document.getElementsByClassName("clasname").innerHTML += htmlll;

Although it keeps saying Uncaught (in promise) TypeError: Cannot read property 'innerHTML' of null.

I have tried

document.addEventListener("DOMContentLoaded", function(event) {
var htmlll= `
<button>hi</button>
`
document.getElementsByClassName("clasname").innerHTML += htmlll;

});

to counter this error, but it didn't work. It didn't give me an error and it didn't append the html.

Note: I am using vanilla javascript. Please dont answer with jquery solutions.

the html is just a div with a class name and im trying to append to that — mcdonalds291, Jul 21 '21 at 19:31

Joy Dey · Answer 1 · 2021-07-21T18:41:55.217

0

It should be document.querySelector('.jspath') or '#jspath' where you mistakenly wrote only jspath

edited Jul 21 '21 at 18:41

answered Jul 21 '21 at 18:40

Joy Dey

563
1
5
17

1

How do you know? OP hasn't provided the HTML. – Spectric Jul 21 '21 at 18:40
There isn't any html tag named jspath. Is there any tag named that? – Joy Dey Jul 21 '21 at 18:42

score 0 · Answer 2 · answered Jul 21 '21 at 19:00

0

It needs to be something like

document.getElementsByClassName("clasname")[0].innerHTML += htmlll;

since .getElementsByClassName() returns a collection, not a single element.

answered Jul 21 '21 at 19:00

Carsten Massmann

26,510
2
22
43

I tried this and it still says ``Uncaught (in promise) TypeError: Cannot read property 'innerHTML' of null`` – mcdonalds291 Jul 21 '21 at 19:08
I'm that case there evidently was no element with `class="clasname"` in the document. Maybe it should be "class name"? – Carsten Massmann Jul 21 '21 at 19:23
No, the class name is literally clasname – mcdonalds291 Jul 21 '21 at 19:30
Don't use `.innerHTML +=`! See [Why is "element.innerHTML+=" bad code?](https://stackoverflow.com/q/11515383). – double-beep Jul 22 '21 at 07:44
This is a tampermonkey script ... so no need for "page optimisation talk" here ;-) – Carsten Massmann Jul 22 '21 at 18:11

Insert HTML to a div in a tampermonkey script

2 Answers2