javascript - 在 js/jquery 小书签中创建 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 文件等进行外部调用的小书签。还有其他方法可以解决这个问题吗？