Why does appending to innerHTML in a bookmarklet overwrite the entire page?

Question

I have this little bookmarklet:

javascript:document.getElementsByTagName("div")[0].innerHTML+="Chuck Norris";

Now it's obviously supposed to take the very first div on the page, and add Chuck Norris into it.

Instead, when pasted on the address bar, Chuck Norris overwrites the page.

Why is this so?

Note: this doesn't occur on Safari...

It doesn't do what you say on Chrome/Win, when entered into the JS console. (Entering into the address bar doesn't work because Omnibox.) — millimoose, Mar 08 '13 at 00:35
I'm not sure why this is downvoted. It is replacing the screen for me on Chrome. — Malk, Mar 08 '13 at 00:38
Thank you, @millimoose... Wasn't aware that the Omnibox would do this... and why? — seanlevan, Mar 08 '13 at 00:39
@user2049022 My point was more that you need to specify how you're testing this better, since it's somewhat dependent on the exact process. — millimoose, Mar 08 '13 at 00:40
Fix the title up to mention it's a bookmarklet issue rather than put "Chuck Norris" in there. — Matthew Lock, Mar 08 '13 at 00:40
Yeah, your title is pretty terrible. I guess people assume it's a joke post. Retitle it something like "why does appending to innerHTML in a bookmarklet refresh the page?" — millimoose, Mar 08 '13 at 00:40
Also, just returning a string from a bookmarklet does the same. (E.g. try with `javascript:"abc"`.) So I'd say the answer is "because that's what bookmarklets / `javascript:` URLs are supposed to do." — millimoose, Mar 08 '13 at 00:43

score 7 · Accepted Answer · answered Mar 08 '13 at 00:44

7

You are not cancelling the action. add void 0; to then end.

javascript:document.getElementsByTagName("div")[0].innerHTML+="Chuck Norris";void 0;

answered Mar 08 '13 at 00:44

epascarello

1

Apparently there's a whole bunch of recommendations for bookmarklets to follow: http://subsimple.com/bookmarklets/rules.asp – millimoose Mar 08 '13 at 00:45
why is void () necessary ? – seanlevan Mar 08 '13 at 02:35
thank you for your answer! :) and what is the difference from void and return false ? – seanlevan Mar 08 '13 at 02:35
[link](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/void) ... It is just the way you need to use `javascript:` uri ... you last executed statement must resolve to undefined in a bookmarklet ... otherwise, that last value is converted to string and that is attempted to parse as an HTML page of its own. – webextensions.org Mar 08 '13 at 08:22
`void(0);` is just the shortest way to get `undefined`. `undefined` = **9** characters ... **`void(0)` = 7 characters** ... `void 0` => `void%200` = **8** characters (%20 is space in bookmarklets) – webextensions.org Mar 08 '13 at 08:27
_“You are not cancelling the action.”_ — Huh? The reason why this happens is that the script’s completion record has a value other than `undefined`; this completion record comes from evaluating that last expression statement. Adding `undefined;` or, equivalently, `void 0;` introduces another expression statement whose completion record _will_ have the value `undefined`. – Sebastian Simon Nov 24 '22 at 18:05

score -1 · Answer 2 · answered Mar 08 '13 at 00:42

-1

I'm not sure what the exact problem is, but I got it working by making a textNode and appending it:

javascript:var d=document.getElementsByTagName("div")[0];var n=document.createTextNode("Chuck Norris");d.appendChild(n);

answered Mar 08 '13 at 00:42

Malk

2 Answers2