在js / jquery bookmarklet中创建HTML布局/模板

Question

我目前有以下内容：

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"
}); 

还有很多其他条目，我将它们全部附加到一个主div，然后将其附加到正文。这太丑了，难以管理。

这适用于在多台用户计算机上运行的书签（仅限FF / Chrome），无法对.css或.html文件进行外部调用等。还有其他方法可以解决这个问题吗？