求一段JS替换后排序并显示出来的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
ul{list-style:disc}
li{padding:5px 0}
p {margin:0 3px; padding:3px; border:1px solid #ccc; display:inline}
</style>
<script>
function fmt(){
var str = document.getElementById('tt').value;
var ul = document.getElementById('ul'); var lis = str.split(/\n/m);
for(var i=0; i<lis.length; i++){
var li = document.createElement('li');
var ps = lis[i].match(/\S+/g);
if(!ps) break;
for(var n =0; n<ps.length; n++)
li.innerHTML += '<p>'+ps[n]+'</p>';
ul.appendChild(li);
}
}
</script>
</head>
<body>
<textarea id="tt" cols="40" rows="4" maxlength="10">
1  0,1      0,1        0,1      0,1 
2  0,2  
3  0,3      0,3
</textarea>
<br />
<input type="button" value="生成" onclick="fmt()" />
<ul id="ul"></ul>
</body>
</html>