[42일] jQuery (8) - 요소 생성

ewok 2022. 9. 26. 17:59

요소를 생성하는 이유

문자 단위의 통신에 많이 사용하기 때문(비동기식) -> AJAX
댓글의 더보기 등의 무한 스크롤링하기 위해

//요소 생성 및 추가
append(), appendTo()    요소를 끝에 추가
prepend(), prependTo()  요소를 앞에 추가
부모.append(자식)
자식.appendTo(부모)

append와 appendTo 모두 요소를 끝에 추가한다는 것은 같은데 어떤 차이가 있을까?

append는 $(a).append(b)라고 작성하면 a뒤에 b가 추가된다.

appendTo는 $(b).append(a)라고 작성하면 b를 a 뒤에 추가한다.

prepend와 prependTo의 차이도 마찬가지이다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>08_요소생성.html</title>
        <!-- jQuery import -->
        <script src="jquery-3.6.1.min.js"></script>
    </head>  
    <body>

        <h3>요소 생성</h3>

        <p>
            <button id="createBtn">테이블 생성</button>
        </p>
        <div id="box"></div>
        <!--
            <table> 요소 element
            border  속성 property, attribute
        -->

        <script>

        $("#createBtn").click(function(){
            //alert();

            //1)
            /*
            let table = "";
            table += "<table border='1'>";
            table += "<tr>";
            table += "  <td>대한민국</td>";
            table += "</tr>";
            table += "</table>";
            
            //$("#box").html(table); //마크업
            //$("#box").text(table); //순수문자열
            */

            //2)
            let $table = $("<table></tabe>"); //여는태그를 맨위, 닫는태그를 맨아래에 쓸 필요없음
            let $tr1   = $("<tr><td>사과</td><td>바나나</td></tr>");
            let $tr2   = $("<tr>");
            let $td1   = $("<td>수박</td>");
            let $td2   = $("<td>").text("메론");

            //$tr2 변수에 $td1, $td2를 마지막에 자식으로 추가
            $tr2.append($td1, $td2); //수박, 메론

            //$table 변수에 자식으로 추가
            $table.prepend($tr1, $tr2);

            $("#box").append($table);

        });//click end

        </script>
        
    </body>
</html>

</tr>, </td>의 닫는태그는 생략해도 자동으로 있는 것으로 인식한다.

08_요소생성.html