Question

I am currently trying to make a bookmarklet that adds, among other things, a DIV element to the page.

I’m doing this by adding the HTML code to body.innerHTML and that works fine. On this DIV element is a button that should allow to hide the added DIV. I therefore tried to add via JavaScript a JavaScript function to the innerHTML called function hideDiv().

The new JavaScript is added to the body and it looks fine. But it doesn’t work.

Short example:

javascript:var b = document.body.InnerHTML; b=b+'<input type="button" onclick="javascript:alert("hello")"/>'; document.body.innerHTML = b;

This bookmarklet should add a button that shows an alert if its clicked. It adds the button but nothing happens when clicking on it.

Is this a general issue? Can JavaScript add (working) JavaScript to a page?

Answer 1

I think you should set an id and then just add the function to the element. Like this:

javascript:var b = document.body.InnerHTML; b=b+'<input type="button" id="test"/>'; document.body.innerHTML = b; document.getElementById('test').onclick = function () { alert('hi')}