안녕하세요! 오늘도 재미있는 코드를 발견해서 이렇게 포스팅으로 찾아왔습니다!
그동안 리액트에 관련한 내용들을 포스팅 했는데 이번에는 오랜만에 자바스크립트에 대한 내용을 가져와봤습니다 : )
그럼 바로 가보실까요?
<body>
<div class="test"></div>
<script src="index.js"></script>
</body>
여기 예시 태그를 가져왔습니다
코드 해석
index.js 라는 자바스크립트 파일에 연결해준 상태이고
바디 상단에는 test 라는 이름을 가진 div 태그를 만들어주었습니다
저는 여기에 insertAdjacentHTML 메서드를 활용해서 html 파일에 손을 대지 않고 html 파일에 내용을 생성 해주도록 하겠습니다
코드를 먼저 보여드리도록 하겠습니다
let element = `
<div class='wow'>Hello</div>
`
const htmlTest = document.querySelector("body")
htmlTest.insertAdjacentHTML("beforeend", element);
저는 이렇게 작성해주었는데요 한 문장씩 해석을 해보록 하겠습니다
코드 해석
element 이름으로 변수를 선언해주었구요
htmlTest 이름으로도 변수를 선언해주었습니다
이 htmlTest 에서는 document.querySelector("body") 를 작성해주어서
body 태그를 선택해주었습니다
그 다음
htmlTest.insertAdjacentHTML("beforeend", element); 코드를 작성해주었습니다
이 때 insertAdjacentHTML 메서드는 innerHTML 과 유사하게 html 파일에 내용을 전달할 수 있습니다
하지만 innerHTML과 다른점이 있는데요 결과로 비교하면서 보여드리도록 하겠습니다
insertAdjacentHTML
let element = `
<div class='wow'>Hello</div>
`
const htmlTest = document.querySelector("body")
htmlTest.insertAdjacentHTML("beforeend", element);
innerHTML
let element = `
<div class='wow'>Hello</div>
`
const htmlTest = document.querySelector("body")
htmlTest.innerHTML = element
네 보이신가요? insertAdjacentHTML 는 기존에 있던 html 파일에 있는 코드를 살려둔 상태에서 추가를 해주고
innerHTML은 기존에 있던 html 파일에 있는 코드를 다 날린 상태에서 추가를 해줍니다
그리고 insertAdjacentHTML 는 총 4가지의 방법으로 사용이 될 수 있는데요
위치를 설정해줄 수 있습니다
이때 중요한 점은 변수명과 왼쪽 오른쪽 방향이 바뀌면 안된다는 점입니다
보시고 직접 타이핑 해보시면서 상황에 맞게 넣어주어서 방향을 설정 해주시면 될 것 같습니다!
네 오늘은 이렇게
insertAdjacentHTML에 대해 알아보았습니다
저도 기존에는 innerHTML 으로만 코드를 작성했었는데요 오늘 알아보았던 insertAdjacentHTML 를 적절하게 사용한다면 더 편리하게 사용할 수 있는 것 같습니다 ㅎ
제가 리액트를 배우고 있는 만큼 잘 활용해서 완성할 수 있을 것 같아서 든든한 마음도 드네요 ㅎ
계속 슬럼프에 빠져있었는데 기초부터 다시 차근차근 하다보니 조금은 자신감도 생기고 슬럼프를 극복한 것 같습니다 :)
네 그럼 오늘도 화이팅이고 우리 꼭 행복해지자구요!!
