処理の概要
テキストエリアに表示した文字列をリストタグで表示する
処理のフロー：
(1)init()メソッドにてテキストエリアに文字列を挿入する
(2)ボタン押下後、文字列を取得し、スペースでデリミタする
(3)リストタグを生成し、デリミタした要素をテキスト挿入する
(4)生成したhtmlタグをテキストエリアに表示する
(5)リストをhtml()メソッドにてdom操作する
画面イメージ
#####画像１
#####画像２
ソースコード
index.html
<link rel="stylesheet" href="./css/default.css">
</head>
<body onload="init()">
<textarea id="initString"></textarea><br>
<input type="button" id="listMakeButton" value="リストを生成する"><br>
<textarea id="listHtmlMake"></textarea><br>
<div id="listDisp"></div>
</body>
main.js
$(function() {
$("#listMakeButton").click(function(){
var text = $("#initString").val();
var lobjArr = text.split(" ");
var ul = $("<ul>");
// 配列用にインデックスを調整する
for (var i= 0; i < (lobjArr.length - 1); i++){
//タグの生成
var li = $("<li>");
//リストタグに配列から取得したテキストを挿入する
li.text(lobjArr[i]);
ul.append(li);
}
var div = $("<div>").append(ul);
//htmlをテキストエリアにそのまま挿入する。
$("#listHtmlMake").val(div.html());
$("#listDisp").html(ul);
})
});
function init(){
var lobjText ="";
var defaultStr = [
["モバイル"],["ランキング"],["Fashion"],
["トラベル"],["グループ"],["アカウント管理"]
]
// 文字列の場合は、+で改行。配列の場合は、カンマで改行が可能
$.each(defaultStr,function(){
lobjText = lobjText + this + " ";
})
$("#initString").val(lobjText);
}
ポイント
html：
(1)htmlが読み込まれる際にonloadにてinit()メソッドを読み込む
js：
(1)自分自身でhtmlタグを挿入出来ないので、div変数を用意し、val()メソッドでdom操作する
(2)同様にul・リストタグを持つ変数を宣言し、タグの中に任意の文字列を挿入する
(3)each構文で取得した要素は、thisで指定出来る
参考資料
JavaScript(仕事の現場でサッと使える！デザイン教科書) p183