728x90
728x90
목 차
1. innerHtml 설명
- innerHTML은 JavaScript에서 DOM(Document Object Model) 요소의 HTML 콘텐츠를 가져오거나 수정하는 데 사용되는 속성입니다. 이 속성을 사용하면 특정 HTML 요소의 내부 내용을 동적으로 변경할 수 있습니다.
2. innerHtml의 특징
- HTML 포함 콘텐츠 조작: 단순 텍스트뿐 아니라 HTML 태그를 포함하여 설정하거나 읽을 수 있습니다.
- 읽기/쓰기 가능
- 읽기: 특정 요소 내부의 HTML 콘텐츠를 가져옵니다.
- 쓰기: 특정 요소 내부의 HTML 콘텐츠를 덮어씁니다.
- HTML 태그 지원: 문자열로 입력된 HTML 태그가 파싱되어 실제 DOM 구조로 변환됩니다.
3. 사용 예제
3-1. HTML 요소 내용 읽기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
document.addEventListener("DOMContentLoaded", function () {
let content = document.getElementById("example").innerHTML;
console.log(content); // <strong>Hello, world!</strong>
});
</script>
</head>
<body>
<div id="example"><strong>Hello, world!</strong></div>
</body>
</html>
3-2. HTML 요소 내용 쓰기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("example").innerHTML = "<em>Updated content!</em>";
});
</script>
</head>
<body>
<div id="example"></div>
</body>
</html>
3-3. 동적 컨텐츠 업데이트 (시계 만들기)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
document.addEventListener("DOMContentLoaded", function () {
function updateContent() {
const currentTime = new Date().toLocaleTimeString();
document.getElementById("clock").innerHTML = `Current Time: <strong>${currentTime}</strong>`;
}
setInterval(updateContent, 1000);
});
</script>
</head>
<body>
<div id="clock"></div>
</body>
</html>
4. 주의 사항
4-1. 기존 콘텐츠 덮어쓰기
innerHTML을 사용하면 해당 요소의 기존 콘텐츠가 모두 제거되고 새 콘텐츠로 덮어씌워집니다.
4-2. 스크립트 실행 문제
innerHTML로 동적으로 추가된 <script> 태그는 실행되지 않습니다.
document.body.innerHTML = "<script>alert('Hello');</script>";
// alert는 실행되지 않음
4-3. XSS(크로스 사이트 스크립팅) 공격 위험
사용자 입력값을 innerHTML에 직접 삽입하면 악성 스크립트가 실행될 위험이 있습니다.
let userInput = "<img src='x' onerror='alert(\"XSS\")'>";
document.getElementById("output").innerHTML = userInput;
// 악성 스크립트가 실행될 수 있음해결 방법: 사용자 입력값을 사용할 경우 textContent를 사용하거나, HTML 인코딩 처리해야 합니다.
5. 대안
textContent: HTML 태그를 포함하지 않은 순수 텍스트를 설정하거나 읽을 때 사용합니다.
document.getElementById("example").textContent = "<strong>Safe content</strong>";
// 결과: <strong>Safe content</strong>
DOM API: 요소를 추가/삭제할 때 appendChild, createElement 등을 사용하면 더 정교한 조작이 가능합니다.
let newElement = document.createElement("strong");
newElement.textContent = "Hello!";
document.getElementById("example").appendChild(newElement);
6. innerHtml 장점과 단점
장점
간단한 HTML 콘텐츠 조작.
빠르게 UI를 업데이트하는 데 유용.
단점
보안 취약점(XSS)에 노출될 가능성.
덮어쓰기로 인해 기존 이벤트 리스너가 제거됨.
관련글
728x90
'프로그래밍 > [javascript] 자바스크립트' 카테고리의 다른 글
| [JavaScript] 자바스크립트 innerText 사용법 (126) | 2024.12.16 |
|---|---|
| [JavaScript] 자바스크립트 textContent 사용법과 주의사항 (90) | 2024.12.15 |
| [JavaScript] 자바스크립트 name으로 값 가져오기 (109) | 2024.12.11 |
| [JavaScript] 자바스크립트 class로 값 가져오기 (122) | 2024.12.10 |
| [JavaScript] 자바스크립트 id로 값 가져오기 (136) | 2024.12.10 |