cf) codepen: html/css/js 이용한 화면 출력결과 확인 가능
innerHTML 속성은 읽기 뿐만 아니라, 쓰기도 가능한 속성.
HTML 태그를 입력할 수도 있음.
가장 쓰기 쉬운 속성이나, 느리고 보안 위협이 있음 (textContent가 안전함)
HTML
<div id="target">변경 전</div> <!-- <div id ="target"> <span>변경 후</span> <div> 만들기
JavaScript
let target = document.querfySelector('#target'); target.innerHTML = "<span>변경 후</span>" // 삭제도 동일한 방법을 응용하여 가능함 // target.innerHTML = "" 이런식으로인가?
HTML출력결과
<div id ="target"> <span>변경 후</span> <div>
엘리먼트를 만드는 메소드는 반드시 알아놓기.
innerHTML을 이용한 생성에 비해 다소 복잡하게 느껴질 수 있지만, 메소드를 이용한 엘리먼트 생성은, 생성과 동시에 이벤트 핸들러 등록이 가능
하다는 장점이 있음.
HTML
<div id="target">변경 전</div>
JavaScript
let target = document.querfySelector('#target'); let newSpan = document.createElement('SPAN'); // span이라는 '새로운 엘리먼트'를 만듦 newSpan.innerHTML = '변경 후' target.appendChild(newSpan); // 자식을 첨부한당 // target아랫쪽에 newSpan 엘리먼트를 추가
HTML출력결과
<div id="target"> 변경 전 <span>변경 후</span> </div>
<template>태그
)HTML 조각을 HTML 내에 정의할 수도 있음. <template>
태그는, 실제로 스크립트를 이용해 어딘가 붙여넣기 전까지는 화면에 보이지 않는 HTML 조각(html에 있기는 한데 화면상 보이지 않는 것).
마크업(HTML)과 구현(JavaScript)의 구분이 보다 더 철저함.
템플릿의 내용을 반복적으로 재사용 하고자 하나, html 태그를 JS에 쓰기 싫을 때 사용.(document.createElement를 사용하지 않아도 된다는 의미)
HTML
<template id="will-be-rendered"> <span>변경 후</span> </template> <div id="target">변경 전</div>
JavaScript
let target = document.querySelector('#target'); let template = document.querySelector('#will-be-rendered'); //#will-be-rendered 안쪽 내용을 자식 노드를 전부 포함하여 복사함. let newContent = document.importNode(template.content, true); //target 내용을 비움. target.innerHTML = ''; target.appendChild(newContent);
HTML출력결과
<div id="target"> <span>변경 후</span> </div>