外部javascript辞書ファイルを使用してスパンにHTMLを挿入する

Question

キーワードを使用して簡単なサイトフィルタを実装しています。ユーザーは検索フィールドにキーワードを入力し、キーワードマッチに基づいてDOMを更新します。これはすでに動作していますが、キーワードをHTMLに直接記述しないようにしたいのですが、IDに基づいてHTMLにキーワードを読み込む外部の「辞書」ファイルが好きです。内のすべてのキーワードを持つ

var dictionary = { 
    "23": ["list","of","key","words"], 
    "24": ["different","list","goes","here"] 
    }; 

：私のような外部ファイルに何かを読み取って、いくつかのjQueryやJavascriptを持っているしたいと思います

<div id="23"> 
<span="keywords" style="display:none">list,of,keywords,goes,here</span> 
</div> 

：

は、それでは私が持っていることは何かに似ていますこのような外部リストを使用すると、保守が非常に簡単になります。私は、キーワードspanにinnerHTMLを注入する必要があると確信していますが、次のステップについてはわかりません。

編集：私が使用しているソートフィルタでは、キーワードが実際にHTMLに存在する必要があります。私は基本的に上記のようにhtmlを書く必要があります。私は単語/ idsのリストが、編集しやすい別々のファイルになることを望みます。

Answer 1

私は答えを得ました。それはうまくいっています。しかし、これは別の質問につながります。これは良いことですか？私のHTMLで

私は置く：（1百かそこらのdivごとに）これは私が私のフィルタ・プラグインに必要なキーワードの私のカンマ区切りのリストになるものである

<span class="keys" id="keywords_101" style="display:none"></span> 

：

The JS：

var fruitlist = { 
    "103": ["apples","bananas","pears"], 
    "102": ["dates","kiwis","mangos"], 
    "101": ["passion fruit","watermelon","grapes"], 
    "100": ["oranges","tangerines","lychee"] 
} 

$(document).ready(function(){ 
Object.size = function(obj) { 
var size = 0, key; 
for (key in obj) { 
    if (obj.hasOwnProperty(key)) size++; 
} 
return size; 
}; 

var size = Object.size(fruitlist); 

for (var n=0; n < size; n++) { 
    var track_key = Object.keys(fruitlist)[n]; 
    var keyword = fruitlist[track_key]; 
    for (var i=0; i < fruitlist[track_key].length;i++) { 
    document.getElementById('keywords_'+track_key).innerHTML=keyword; 
    } 
    } 
}); 

これですべての作業が完了しました。しかし、100以上のアイテムのフルーツリストをループしてdivを書くのではなく、これを行うためには、よりシンプルな、より良い、より効率的な方法がありますか？

私はdivにHTMLをハードコードすることができましたが、キーワードリストをかなり編集して、HTMLから簡単にアクセス/編集することができます。

ありがとうございました