【jquery,js】文字列をリストタグで表示する[onload,append,html,Dom操作] [js15_20210330]

8472 ワード
JavaScript jQuery JavaScript テキストリンク

処理の概要

テキストエリアに表示した文字列をリストタグで表示する

処理のフロー：

　(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