반응형
둘 다 JS를 사용해서 HTML코드를 DOM에 넣어 조작하는 메서드다.
1. innerHTML = " html "
<span>로 둘러쌓인 텍스트를 <button>클릭 시 <p>태그로 바꾸는 JS를 작성해보았다.
< HTML >
<button>click</button>
<span id="el">안녕하세요, 지금은 'span' 태그입니다.</span>
라이브 서버로 확인해보면 클릭 버튼 옆에 텍스트가 나란히 나온다.
< JS >
const btn = document.querySelector("button");
const el = document.querySelector("#el");
btn.addEventListener('click', e => {
el.innerHTML = "<p>지금은 'p'태그로 변경되었습니다.</p>"
})
클릭하는 순간 <span>태그에서 <p>태그로 덮어씌워진다.
innerHTML의 특징 중 하나다. 기존 노드는 삭제되면서 새로 리턴이 되어 나타난다.
2. insertAdjacentHTML( position, html )
position에는 4가지의 옵션이 있는데, 어떤 값을 넣느냐에 따라 html 요소 위치를 설정 할 수 있다.
C라는 텍스트가 있는 span태그를 넣어서 기준점을 정해본다.
< HTML >
<span id="el">C</span>
< JS >
const el = document.querySelector("#el")
el.insertAdjacentHTML('beforebegin', '<span>A-</span>');
// 타켓 요소 전(형제레벨)에 생성- 시작 태그의 앞(형제 레벨로)
el.insertAdjacentHTML('afterbegin', '<span>B-</span>');
// 타켓 요소 다음(자식요소)에 생성 - 시작 태그의 뒤(자식 요소로)
el.insertAdjacentHTML('beforeend','<span>-D</span>');
// 타켓 요소 '끝나는 태그' 바로 직전(자식요소로)에 요소를 생성 - '종료 태그' 앞(자식 요소로)
el.insertAdjacentHTML('afterend','<span>-E</span>');
// 타켓 요소의 '끝나는 태그' 바로 다음(형제레벨)에 요소를 생성 - '종료 태그' 뒤(형제 레벨로)
화면에 A-B-C-D-E 결과가 나오는것을 확인 할 수 있다.
개발자 도구를 열어서 확인해보면 C 기준으로 정확한 위치를 확인 할 수 있다.
< insertAdjacentHTML VS innerHTML >
el.insertAdjacentHTML( position, html ) | innerHTML = "html" |
인자 2개(위치값, html코드) | 인자 1개 (html 코드) |
기존 노드 건들지 않고 노드 추가 | 기존 노드 삭제 후 재구성 |
position 종류 4가지 ( beforebegin, afterbegin, beforeend, afterend ) |
반응형
'프론트엔드 > Javascript' 카테고리의 다른 글
[JS] reduce() 내장메서드 함수 파악하고 써먹어보기 (0) | 2022.07.05 |
---|---|
자바스크립트 < requestAnimationFrame() > 애니메이션 만들기위한 개념잡기 (0) | 2022.02.15 |
JavaScript로 style(CSS)의 속성을 추가/변경/삭제/읽기 (0) | 2022.02.12 |
자바스크립트 배열 내장함수 - 올림차순 내림차순 / 순서정렬하기 (0) | 2022.02.11 |
JS 이벤트 메서드 addEventListener 이벤트리스너 종류 모음 (0) | 2022.02.04 |