ちょっとしたJS

良くやる事だが、毎回やり方忘れてしまうのでメモ

空っぽの要素に、JSONで渡された情報をもとにひたすら要素を詰め込むやり方

[[1,2,3],['a','b','c'],['x','y','z']]

みたいなJSONがあったとして

<div id='hoge'>
<input type='text' value='1'/>
<input type='text' value='2'/>
<input type='text' value='3'/>
<br>
<input type='text' value='a'/>
<input type='text' value='b'/>
<input type='text' value='3'/>
<br>
<input type='text' value='x'/>
<input type='text' value='y'/>
<input type='text' value='z'/>
<br>
</div>

とやりたい

Pythonで書くと

data = [[1,2,3],['a','b','c'],['x','y','z']]
tag = "<input type='text' value='%s' />"
res = '<br>'.join([tag%str(i) for ii in data for i in ii])

こんな感じのやつが欲しい。

JSで書くと

駄目なパターン

data=[[1,2,3],['a','b','c'],['x','y','z']]
$.each(data, function(i, val) {
  $.each(val, function(ii, val2) {
    $('#result').html($('#result').html() + 
      '<input type="text" value=' + val2 + '/>');
    });
  $('#result').html($('#result').html() + '<br>');
  });
});

これがめっちゃおそい。10x20の要素が入ったJSONを渡すと5.4秒くらいかかる。（Firefox3.6, C2D2.4GHz)
生成する度に、描画を行っていることと、追加する度に既存の要素を全体から探してくるかららしい。

モン様に教わったコード
速いパターン

data=[[1,2,3],['a','b','c'],['x','y','z']]
$.each(data, function(i, val) {
  $.each(val, function(ii, val2) {
    $('<input/>',{type:'text',id:row+col,value:val2}).appendTo('#result');
    });
  $('<br>').appendTo('#result'); 
  });
});

これで激速になった。

要素に追加するには

$('追加したいもの').appendTo('#追加先')

とやれば良く、追加したいものを色々便利に作成するには

$('<input/>', {type:'text', id:'hoge', value:'123'})

とやれば色々指定済みのオブジェクトを作成することが出来る。
ありがたやです。