[jquery, js] 문자열을 목록 태그로 표시 [onload,append,html,Dom 조작] [js15_20210330]

8082 단어 자바스크립트jQuery

처리 개요



텍스트 영역에 표시된 문자열을 목록 태그로 표시

처리 흐름:

(1) init() 메소드에서 텍스트 영역에 문자열을 삽입합니다.
　(2)버튼을 누른 후, 문자열을 취득해, 스페이스에서 구분자 한다
　(3)리스트 태그를 생성해, 구분한 요소를 텍스트 삽입한다
　(4) 생성한 html 태그를 텍스트 영역에 표시한다
　(5)리스트를 html()메소드로 dom 조작한다

화면 이미지



이미지 1



이미지 2



소스 코드



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
JS에서 특정 요소만을 선택한 상태로 설정
Rails로 여러 이미지를 슬라이드 표시

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage