Using a bookmarklet to get html elements that appear after the page loads

I am making a small bookmarklet for my classmates. I want to force spellcheck on a form that can be queried by document.getElementById("tinymce") or document.querySelector("#tinymce"). I can use setAttribute to set spellcheck to true. However, this element doesn’t appear until you click on the comment box, when the site loads tinymce - if you don’t select the form, trying to get tinymce returns null. Now when I select the form, I can paste into the console document.getElementById("tinymce") and get an element. However, the bookmarklet
returns null, even after the element has appeared in the site.
Can bookmarklets recognize that a site has changed? How can I fix this?

You can try it out on the W3schools tryit editor:

setAttribute for the ID?

I’ll make another bookmarklet in my coding ide I guess

1 Like

This can happen when the element is in an iframe and thus not in the same document, which is the case for the tryit editor. In fact, if you were to run that snippet in the console, you’d get the same result, contrary to what you describe:


In the console you would work around this by selecting which frame to run the commands in:


But I don’t think bookmarklet code is allowed to say “just let me break the same origin policy for a minute here.”

Anyhow, look into DOM mutation observers if you want to have the browser run some code when something changes the page. Not sure it’ll be better than clicking the bookmarklet after clicking the comment button, but we’re here to learn stuff, not to work around problems.


True. I wanted this to be easy enough for everyone to use, but I guess that’s not possible ;-; - interesting thing about the iframe quirk. What browser are you using?

I’m using Firefox. Chrome has a similar way to choose which frame to run the commands in.


Oh cool - Firefox looks really cool but it runs really hot on my computer.