인프런 커뮤니티 질문&답변
작성한 질문수
질문드립니다.
작성
·
150
1
querySelector로 id 값을 참조하고 innerHTML로 내용을 해당 아이디에 첨부하는 과정을 수행하면, 이전에 html 파트에서 해당 id에 기술했던 내용은 무시되는 건가요? 예를 들자면
<html>
<body>
<div id="example"> <p>hi</p> </div>
</body>
<script>
document.querySelector("#example").innerHTML
= '<p>hellow</p>';
</script>
</html>
위와 같은 코드에서 hi라고 적힌 부분은 무시되더라구요. 자바스크립트를 활용해서 html 내부 정보를 수정할때는 html 자체적으로 작성한 값은 무시되는건지 그렇다면 두 접근법이 공존할 수는 없는지 궁금합니다.
답변 1
1
그랩
지식공유자
HTML 내부 정보를 수정할 때는 보통 변경할 태그의 id, class를 활용하거나, 하위 선택자나 자식 선택자(>)로 변경할 태그에 접근하여 값을 바꾸는 방식을 많이 사용합니다!
혹은 값을 추가할 때는
document.querySelector(...).innerHTML = "추가할 태그" + document.querySelector(...).innerHTML 이런식으로 기존의 innerHTML에 새로운 태그를 string 형식으로 추가하여 사용하기도 합니다.