InsertAdjacentHTML vs InsertAdjacentElement

KHW·2021년 5월 17일

Javascript 지식쌓기

목록 보기

39/95

InsertAdjacentHTML vs InsertAdjacentElement

예시로 알아보기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <body>
        <ul id='a'>
            
        </ul>

        <ul id='b'>
        </ul>

    </body>
    <script>
const moving1 = `<li>a</li>`;
document.querySelector('#a').insertAdjacentHTML('afterbegin',moving1)

const moving2 = document.createElement('li')
moving2.innerHTML = 'b';

document.querySelector('#b').insertAdjacentElement('afterbegin',moving2)

console.log(typeof moving1,typeof moving2)

    </script>
</html>

moving1은 insertAdjacentHTML을 사용하였고
moving2는 insertAdjacentElement를 사용하였다.

해당 결과는

이와 같다.

콘솔에서는 각각 string object로 나타난다.

insertAdjacentHTML

string 형태를 받아오는 역할을 한다. 즉, 리터럴 형태에 유용하게 쓰인다.
<li>a</li>

insertAdjacentElement

이미 만들어진 어떤 Element 형태를 가져오는 역할을 한다.
그래서 createElement로 가져온 것의 적용하지

새로운 예시

   <li id='c'>a</li>가 body태그가 존재하는 시점에서
document.querySelector('#b').insertAdjacentElement('afterbegin',document.querySelector('#c'))
document.querySelector('#b').insertAdjacentHTML('afterbegin',document.querySelector('#c'))
둘중 어떤것이 맞을까?