자식요소 추가

WEB/jQuery

자식요소 추가 - append, prepend / 형제요소 추가 - after, before

지나온 2022. 6. 20. 11:46

<body>
    <ul>
        <li id="child">내용</li>
    </ul>
</body>

목록이라고 적힌 li 하나가 존재하는 상태에서 append, prepend로 요소를 추가해보도록 한다.

append : 해당 선택자에 마지막 자식 요소로 추가

    <script>
        $(function(){
            $("ul").append("<li>마지막 요소 추가 -1</li>");
            $("ul").append("<li>마지막 요소 추가 -2</li>");
            $("ul").append("<li>마지막 요소 추가 -3</li>");
            $("<li>마지막 요소 추가 -4</li>").appendTo("ul");
        });
    </script>

ul의 자식요소를 추가한다.

선택자.append(추가할 내용)를 사용하면 해당 요소의 마지막에 요소를 추가한다.

(추가할 내용).appenTo(선택자) 으로 추가할 내용을 먼저 적어주어도 동일하게 적용할 수 있다.

prepend : 해당 선택자에 첫번째 자식요소로 추가

    <script>
        $(function(){
            $("ul").prepend("<li>첫번째 요소 추가 -1</li>");
            $("ul").prepend("<li>첫번째 요소 추가 -2</li>");
            $("ul").prepend("<li>첫번째 요소 추가 -3</li>");
            $("<li>첫번째 요소 추가 -4</li>").prependTo("ul");
        });
    </script>

ul의 자식요소를 추가한다.

선택자.prepend()으로 1, 2, 3, 4 순서대로 내용을 추가하였다. 계속해서 첫번째 자식요소로 추가가 된다.

prependTo로도 할 수 있다.

형제요소 추가

after : 동생 요소 추가

    <script>
        $(function () {
            $('#child').after('<li>after -1</li>');
            $('#child').after('<li>after -2</li>');
            $('#child').after('<li>after -3</li>');
        });
    </script>

계속해서 목록이라고 적힌 곳(#child)의 바로 뒤에 추가 된다.

before : 형 요소 추가

    <script>
        $(function () {
           $('#child').before('<li>before -1</li>');
           $('#child').before('<li>before -2</li>');
           $('#child').before('<li>before -3</li>');  
        });
    </script>

#child 기준이기 때문에 계속해서 해당 선택자의 바로 앞 형제 요소로 추가 된다.