티스토리 뷰

development/html javascript CSS

[JavaScript] insertAdjacentHTML()과 insertAdjacentElement(), append()의 쓰임 비교!!

Happyoon ~ 2021. 10. 15. 00:19
728x90
반응형

본 포스팅의 핵심은 insertAdjacentHTML, insertAdjacentElement, append의 매개변수를 정확히 알고 사용법을 구별하는 것이다.

 

insertAdjacentHTML() 메서드는 HTML 같은 특정 텍스트를 파싱하고, 특정 위치에 원하는 HTML요소를 추가한다. 

사용법은 다음과 같다.

element.insertAdjacentHTML(position,text);

 

position에는 앞서 배운 다음의 것들만 사용 가능하다.

  • beforebegin (element의 부모가 존재해야 함)
  • afterbegin
  • beforeend
  • afterend (element의 부모가 존재해야 함)

 

아래 예제는 append, insertAdjacentElement, insertAdjacentHTML의 활용 모습이다.

주석에 4가지 경우에 대한 설명이 있으므로 주석을 읽고 이해하는 것이 중요하다.

 

예제 

<!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>Step08_etc2.html</title>
</head>
<body>
    <button id = "addBtn">추가하기</button>
    <div id = "one">

    </div>
    <script>
        document.querySelector("#addBtn").addEventListener("click",function(){
            /*
                insertAdjacentElement()와 insertAdjacentHTML을 비교해보세요.
            */
           //insertAdjacent의 두번째 인자는 element이다. 
           //따라서, 아래 예제의 3번에 insertAdjacent의 올바른 사용을 위해 'Element로 추가된 p요소'를 innerText로 갖는 pElement요소를 생성한다.
            let pElement = document.createElement("p");
            pElement.innerText ="3. Element로 추가된 p요소";
            //1. insertAdjacentHTML의 사용 
            //insertAdjacentHTML은 (position, string)을 매개변수로 갖기 때문에 아래와 같이 코드를 작성한다.
            document.querySelector("#one").insertAdjacentHTML("beforeend","<p>1. HTML로 추가된 p요소</p>");
            //2. append의 사용
            //append는 요소추가, 텍스트 추가, 그리고 요소 및 텍스트 추가에 사용될 수 있다.
            //여기에서는 위의 insertAdjacent와 같은 형식으로 대입했을 때 어떠한 결과를 가져오는지 확인해보기 위해
            //문자열로 삽입하였다.
            document.querySelector("#one").append("<p>2. append로 추가된 p요소</p>");
            //3. 위에서 생성한 pELement를 사용하여 insertAdjacentElement의 올바른 사용법을 시도해본다.
            document.querySelector("#one").insertAdjacentElement("beforeend",pElement);
            //4. insertAdjacentElement에서 1,2번과 동일한 형식으로 매개변수를 넣었을 때를 확인해본다.
            document.querySelector("#one").insertAdjacentElement("beforeend","<p>4. Element로 추가된 p요소</p>");
            
        });
    </script>
    
</body>
</html>

 

결과

결과를 살펴보자.

1번 코드는 insertAdjacentHTML에 두번째 매개변수로 문자열을 넣어주었고,

우리가 의도한대로 HTML로 해석되었음을 확인할 수 있다.

 

2번 코드는 append를 사용하였다.

append는 매개변수에 따라 문자열, 요소, 그리고 문자열과 요소 모두 삽입할 수 있으므로 어떠한 의도를 가지고 매개변수를 활용하는지가 중요하다.

위 예제에서는 매개변수로 문자열을 넣었고 결과물에서 문자열로 해석되어 출력되었음을 확인할 수 있다.

 

3번 코드는 두번째 매개변수로 element를 갖는 insertAdjacentElement 메서드에 맞게 p요소를 생성하여 변수로 넣어주었다.

그에 따라 HTML요소로 해석되어 올바르게 출력된 결과물을 확인할 수 있다.

 

4번 코드는 1번과 비교해보아야 한다.

insertAdjacentElement 두번째 변수로 문자열을 넣었고 그 결과 오류가 뜨며 출력이 되지 않음을 확인할 수 있다.

 

 

정리하자면, 각 메서드의 매개변수는 다음과 같다. 

 

  • insertAdjacentHTML(position, string) : HTML요소 삽입
  • insertAdjacentElement(position,element) : HTML요소 삽입
  • append(string) : 문자열 삽입
  • append(element) : 요소 삽입
  • append(string, element) : 문자열 및 요소 삽입 (정확한 활용법을 아직 익히지 못하였다 ㅠ)  
반응형

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

[JavaScript] 에서 문자열의 생성법과 가공법 / backtick, ${변수명}  (0) 2021.10.15
[JavaScript] append()  (0) 2021.10.15
[JavaScript] innerHTML / innerHTML과 append()의 비교  (0) 2021.10.14
[CSS] cursor, hover  (0) 2021.10.14
[JavaScript] this  (0) 2021.10.14
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
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
글 보관함