I currently have the following:
var inputDiv = $('<div/>').addClass('testing inputd').css({
width: "90px",
height: "245px",
border: "1px solid #000",
"background-color": "#fff",
padding: "3px",
position: "fixed",
top: "30px",
left: "10px",
"z-index": "10000"
});
var tableDiv = $('<table/>').addClass('testing tabled').css({
'border-collapse': 'collapse',
'border-spacing': '2px',
"z-index": "10000"
});
var tablecDiv = $('<div/>').addClass('testing tabledc').css({
height: '195px',
'overflow-y': 'auto',
"z-index": "10000"
});
There are a lot of other entries like these and I append them all to one main div, and then append that to the body. This is SO ugly and incredibly hard to manage.
This is for a bookmarklet that is run on multiple users computers (FF/Chrome only) and cannot make external calls to .css or .html files and so on. Is there any other way to go about this?