How to load external css, js and append a div to the DOM from a bookmarklet?

Question

Hi, I'm trying to build a bookmarklet that does the following:

1.)loads an external js, located on my server (done)

javascript:function%20loadScript(scriptURL)%20{%20var%20scriptElem%20=%20document.createElement('SCRIPT');%20scriptElem.setAttribute('language',%20'JavaScript');%20scriptElem.setAttribute('src',%20scriptURL);%20document.body.appendChild(scriptElem);}%20loadScript('http://127.0.0.1/main.js?x='+Math.random());

2.)this external javascript in turn, loads up jquery and jquery ui than adds a div into the current site DOM. (can't get this to work)

function loadScripts(scriptURL) {


 var scriptElem = document.createElement('SCRIPT');
 scriptElem.setAttribute('language', 'JavaScript');
 scriptElem.setAttribute('src', scriptURL);
 void(document.body.appendChild(scriptElem));
}


loadScripts('http://127.0.0.1/js/jquery-1.3.2.min.js');
loadScripts('http://127.0.0.1/js/jquery-ui-1.7.2.custom.min.js');


var head = document.getElementsByTagName('head')[0]; 
$(document.createElement('link')).attr({type: 'text/css', href: 'http://127.0.0.1/css/redmond/jquery-ui-1.7.2.custom.css', rel: 'stylesheet'}).appendTo(head);



$(document).ready(function(){
    div = $("<div>").html("Loading......");
    $("body").prepend(div);
});

The problem I'm having is that I can't append a div with a certain id, The idea is to use dialog() function of jqueryui in order to have a resizable, movable dialog box appear on any site I use the bookmarklet on.

$("#dialog").dialog();

As you can imagine I need to load my content into a particular div so I don't mess up the design of the site the bookmarklet was loaded in.

3.)The dialog that just opened has the content of a remote php file that basically parses the page.

The script is done I just need it to load in thid dialog that I'm trying to construct.

Please help as I am really stuck with this! Thanks.

Answer 1

Does this help? Is this the part that gives you problems?

$("<div id='id'></div>").html("Loading......");

The jQuery docs say:

All HTML must be well-formed, otherwise it may not work correctly across all browsers. This includes the case where $("<span>") may not work but $("<span/>") will (note the XML-style closing slash).