티스토리 뷰

development/html javascript CSS

[JavaScript] 요소 삽입 방법 / append(), beforebegin, afterbegin, beforeend, afterend / insertAdjacentElement()

Happyoon ~ 2021. 10. 14. 13:26
728x90
반응형

이전 게시물에서 요소를 삽입할 때 append()메서드를 사용했었다.

append 사용 시, 가장 마지막에 요소가 추가됨을 확인할 수 있었는데, 이번에는 다양한 위치에서 요소를 삽입하는 방법에 대해 공부해보려 한다.

그 중에서도 beforebegin, afterbegin, beforeend, afterend에 대해 다뤄볼 예정이다.

 

사용법은 insertAdjacentElement() 메서드를 활용한다.

 

[insertAdjacentElement]

targetElement.insertAdjacentElement(position, element);

 

position

  • 'beforebegin': targetElement 외부 앞 (트리 요소의 부모가 있는 경우에만 작동)
  • 'afterbegin': targetElement 내부의 첫번째 자식 앞
  • 'beforeend': targetElement 외부의 마지막 자식 뒤
  • 'afterend': targetElement 외부 뒤 (트리 요소의 부모가 있는 경우에만 작동)

 

element

  • 삽입할 요소 

 

반환값

삽입된 요소 또는 삽입에 실패한 경우 null 반환

 

 

활용법

document.querySelector("#msgList").insertAdjacentElement("beforebegin",lst);

 

insesrtAdjacentElement()메소드 안에 beforebegin 등을 문자열로 넣어주면 된다.

 

 

[사용 시 삽입되는 각각의 위치]

 //beforebegin, afterbegin, beforeend, afterend
            /*  
                beforebegin
                <ul>
                    afterbegin
                    내용
                    beforeend
                </ul>    
                afterend
            */

 

이제 예시를 살펴보자.

 

 

예시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step06_createElement4.html</title>
</head>
<body>
    <input type="text" id = "inputMsg" placeholder="메세지 입력...">
    <button id = "addBtn">추가</button>
    <button id ="prependBtn">새로 추가</button>
    <ul id = "msgList">

    </ul>
    <script>
        

        document.querySelector("#addBtn").addEventListener("click",function(){
            let msg = document.querySelector("#inputMsg").value;
            let lst = document.createElement("li");
            lst.innerText = msg;
            document.querySelector("#msgList").append(lst);
        });

        document.querySelector("#prependBtn").addEventListener("click",function(){
            let msg = document.querySelector("#inputMsg").value;
            let lst = document.createElement("li");
            lst.innerText = msg;
            //beforebegin, afterbegin, beforeend, afterend
            /*  
                beforebegin
                <ul>
                    afterbegin
                    내용
                    beforeend
                </ul>    
                afterend
            */
            document.querySelector("#msgList").insertAdjacentElement("beforebegin",lst);
        });
    </script>
</body>
</html>

 

 

다음은 예시의 '새로 추가' 버튼을 눌렀을 때 각각 경우에 대한 반응이다.  

 

  • beforebegin

 

 

 

 

 

  • afterbegin 

 

 

 

  • beforeend

 

 

  • afterend

 

위에서 알 수 있는 점은 beforeend와 append()의 쓰임이 동일하다는 점이다.

따라서, 각자 편리한 방법으로 사용하면 될 것이다. 

반응형

'development > html javascript CSS' 카테고리의 다른 글

[CSS] cursor, hover  (0) 2021.10.14
[JavaScript] this  (0) 2021.10.14
[JavaScript] createElement() , setAttribute()  (0) 2021.10.14
[JavaScript] if문  (0) 2021.10.13
[JavaScript] 반복문(2) forEach  (0) 2021.10.13
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함