jQuery로 요소 생성 및 추가하기

p 태그요소 생성하기
        [JS]     : document.createElement("p");
        [jQuery] : $("<p>");


        요소에 속성 추가/제거하기
        [JS]     :  요소.setAttribute("속성명", "속성값");  // 추가
                    요소.removeAttribute("속성명");         // 제거

        [jQuery] : 요소.attr("속성명", "속성값");           // 추가
                   요소.attr("속성명");                     // 속성값 얻어오기
                   요소.removeAttr("속성명");               // 제거

                   요소.prop("속성명", "속성값");           // 추가
                   요소.prop("속성명");                     // true / false
                   요소.removeProp("속성명");               // 제거 (보류)

        * Attribute -> 속성명 = "속성값"
        * Property  -> 속성명

        prop("속성명")  에서 "속성명"은 checked, selected, disabled, enabled 등과 같은 것으로써
        속성명만 작성되어 있기 때문에 있다(true)/없다(false)로 나타낸다.
        -> 속성명만 작성되는 속성들 이외에는 속성값을 반환한다.

        HTML문에서 요소 삽입하기

        [JS]     : 부모.append(요소 | 노드, ...)    // 부모의 마지막 자식 요소로 삽입
                   부모.appendChild(노드)           // 부모의 마지막 자식 요소로 삽입

                   부모.prepend(요소 | 노드, ...)   // 부모의 첫번째 자식 요소로 삽입
                   부모.prependChild(노드)          // 부모의 첫번째 자식 요소로 삽입

        [jQuery] : $(부모).append(자식);            // 부모의 마지막 자식 요소로 삽입
                   $(자식).appendTo(부모);          // 부모의 마지막 자식 요소로 삽입

                   $(부모).prepend(자식);           // 첫 번째 자식으로 삽입
                   $(자식).prependTo(부모);         // 첫 번째 자식으로 삽입

                   $(A).after(B);                   // A요소 뒤에 B요소 삽입(형제)
                   $(B).insertAfter(A);             // A요소 뒤에 B요소 삽입(형제)

                   $(A).before(B);                   // A요소 앞에 B요소 삽입(형제)
                   $(B).insertBefore(A);             // A요소 앞에 B요소 삽입(형제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 메소드</title>

    <style>
        div{
            box-sizing: border-box;
            border : 1px solid black;
        }

        #wrapper{
            width : 300px;
            height: 800px;
        }

        #base{
            height: 300px;

            overflow: auto;
            /* 내용이 요소의 크기를 넘어서면 자동으로 스크롤을 추가 */
        }

        .box{
            width: 30px;
            height: 30px;
            background-color: lightgreen;
            text-align: center;
            line-height: 28px;
            display: inline-block;
        }

        .btn{ background-color: skyblue;}

    </style>


</head>
<body>
    <h1>요소에 내용 또는 값 얻어오기/세팅하기</h1>
    
    <div id="area">
        <button>테스트 버튼</button>
    </div>

    <button id="btn1">확인</button>

    <hr>
    <input type="checkbox" id="test" class="cls">

    <hr>
	<h1>jQuery로 요소 생성 및 추가하기</h1>

    <button id="add1">박스 추가</button>  <!-- #base 마지막 자식 -->
    <button id="add2">버튼 추가</button>  <!-- #base 첫번째 자식 -->

    <button id="add3">checkbox 추가</button>  <!-- #base 마지막 자식 -->
    <button id="add4">이전 형제 추가</button>  <!-- #base 이전 형제 -->
    <button id="add5">다음 형제 추가</button>  <!-- #base 다음 형제 -->


    <div id="wrapper">
        <div id="base"></div>
    </div>


    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="js/08_jQuery메소드1.js"></script>
</body>
</html>

// 요소에 내용 또는 값 얻어오기/ 세팅하기
document.getElementById("btn1").addEventListener("click",function(){

    console.log( $("#area").text() );
    console.log( $("#area").html() );

    // #area1 내부 내용 초기화
    // document.getElementById("area").innerHTML = ""; // JS
    // $("#area").html(""); //jQuery

    $("#area").html("<h3> 새롭게 생성된 요소</h3>");
});


// 요소 생성, 속성 추가, HTML 화면 삽입

// 박스 추가
let count = 1;

$("#add1").on("click", function(){

    // 1) div 요소 생성
    const div = $("<div>");

    // 2) 생성된 div 요소에 box class 추가
    div.attr("class", "box");

    // 3) div에 숫자 추가
    div.text(count++);

    // 4) #base의 마지막 자식으로 추가
    $("#base").append(div);

});

// 버튼 추가
$("#add2").on("click", function(){
    // 1) 버튼 요소 생성
    const btn = $("<button>"); // 시작태그만 적어도 종료 태그도 같이 생성된다

    // 2) 클래스 추가
    btn.attr("class", "box btn");
    // btn.attr("class", "btn"); // 앞서 작성된  box 클래스 추가 내용을 덮어씀

    // btn.addClass("btn"); // addClass("클래스명") : 클래스 추가
                        // <-> removeClass("클래스명") : 일치하는 클래스명 속성값만 제거


    // 3) btn에 숫자 추가
    btn.text(count++);


    // 4) #base의 첫 번째 자식으로 추가
    $("#base").prepend(btn);

});


// checkbox 추가
$("#add3").on("click", function(){
    // 1) input 요소 생성
    const input = $("<input>");

    //2) type ="checkbox" 추가
    input.attr("type", "checkbox");

    // 3) 체크가 되어있는 상태로 만들기
    // input.attr("check", "checked");
    input.prop("checked", true);

    // 4) #base의 마지막 자식으로 추가
    input.appendTo( $("#base"));
});

//이전 형제 요소 추가
$("#add4").on("click", function(){
    // 1) div 요소 생성
    const div = $("<div>");

    // 2) 클래스 before추가
    div.addClass("before");

    // 3) #base의 이전 형제 요소로 삽입
    $("#base").before(div);

});

// 다음 형제 요소 추가
$("#add5").on("click", function(){
    const div = $("<div>");
    div.addClass("after");
    div.insertAfter( $("#base"));

    $("<div class='after'>").insertAfter( $("#base"));
    //한 줄로 쓰면 해석이나 수정에 어려움이 있어 나눠서 쓰는게 좋다
});

저작자표시 비영리 변경금지 (새창열림)

'Frontend > jQuery' 카테고리의 다른 글

[jQuery] 이벤트:: input(focus, blur,change,select) (0)	2021.11.17
[jQuery] 메서드 :: remove(), empty(), detach(),clone(),each() (0)	2021.11.17
[jQuery] 순회(탐색) 메서드 :: Sideways 탐색 메서드 (0)	2021.11.17
[jQuery] 순회(탐색) 메서드 :: Descendants (자손) 탐색 메서드 (0)	2021.11.17
[jQuery] 순회(탐색) 메서드 :: Ancestors (조상) 탐색 메서드 (0)	2021.11.17

[jQuery] 메서드 :: get/set , p 태그, 속성,

'Frontend > jQuery' 카테고리의 다른 글

티스토리툴바