Load in jQuery into a SVG open as a page

Load in jQuery into a SVG open as a page

I am able to hook mouse events on SVG elements by going into it with the
Chrome Web Inspector, assigning an id to the SVG polygon tag, and then
using the native $() which is equivalent to document.getElementById to
hook it:
$("#THISONE").addEventListener('click', function() { console.log('clicked
it'); });
Now I want to make this slightly less painful to work with so it'd be nice
if I can get jQuery DOM methods to work with.
So...
(function() {
var jq = document.createElement('script');
jq.src = "http://code.jquery.com/jquery-latest.js";
document.appendChild(jq);
})();
produces Uncaught TypeError: Cannot call method 'appendChild' of null. So
apparently even document doesn't exist. document is accessible from the js
console, but this function loaded as a bookmarklet does not work.
I then tried pasting the contents into the js console, it produces this:
Error: HierarchyRequestError: DOM Exception 3
code: 3
message: "HierarchyRequestError: DOM Exception 3"
name: "HierarchyRequestError"
stack: "Error: A Node was inserted somewhere it doesn't belong.↵
at <anonymous>:4:10&#8629; at Object.InjectedScript._evaluateOn
(<anonymous>:602:39)&#8629; at Object.InjectedScript._evaluateAndWrap
(<anonymous>:521:52)&#8629; at Object.InjectedScript.evaluate
(<anonymous>:440:21)"
__proto__: DOMException
Any tips?
My ideal goal is to have a bookmarklet that I can use on any SVG i open in
Chrome that will install a delegated event handler that can do things like
respond to clicks on certain elements to provide popups or change colors.
In particular I'm dealing with enormous SVGs of graphs produced by dot.
These graphs have long snakey edge paths which overlap in such a way that
it is near-impossible to follow them. So, I want to highlight just the
edges incident on a node if I click the node.
Failing that, I will resort to some hack that embeds the svg into a html
webpage, or is linked from a resource. Somewhat less elegant but workable
enough.