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

このようなエントリは他にもたくさんあります。それらすべてを 1 つのメイン div に追加し、それを body に追加します。これは非常に醜く、管理が非常に困難です。

これは、複数のユーザーのコンピューター (FF/Chrome のみ) で実行され、.css または .html ファイルなどへの外部呼び出しを行うことができないブックマークレット用です。これについて他に方法はありますか？