✨ 추천 사용 상황
- ✅ append() : 요소나 텍스트를 안전하게 덧붙이고 싶을 때
- ✅ textContent : 태그 없이 순수 텍스트만 다룰 때
- ✅ innerHTML : HTML 구조나 스타일을 같이 넣고 싶을 때
📘 append vs textContent vs innerHTML 요약
메서드 설명 태그 해석 추가 방식
| append() | 요소나 텍스트를 뒤에 추가 | ❌ 텍스트에 HTML 태그 써도 그대로 나옴 | 요소 또는 문자열 가능 (여러 개도 가능) |
| textContent | 텍스트만 넣기 | ❌ HTML 태그 무시됨 | 기존 내용에 텍스트만 추가/대체 |
| innerHTML | HTML 문자열을 넣음 | ✅ 태그 해석됨 | 기존 내용을 덮어씀 또는 += 로 추가 가능 |
🧪 예시 요약
// append
box.append("안녕 <b>굵게</b>"); // => 그대로 보임
// textContent
box.textContent = "<b>굵게</b>"; // => <b>굵게</b> (태그 그대로)
// innerHTML
box.innerHTML = "<b>굵게</b>"; // => 실제로 굵게 표시됨
아래는 비교용 테스트 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>append vs textContent vs innerHTML</title>
<style>
#box {
border: 2px solid #333;
padding: 10px;
margin-top: 10px;
}
button {
margin: 5px;
}
</style>
</head>
<body>
<h1>append vs textContent vs innerHTML 비교</h1>
<button onclick="useAppend()">append()</button>
<button onclick="useTextContent()">textContent</button>
<button onclick="useInnerHTML()">innerHTML</button>
<button onclick="clearBox()">내용 지우기</button>
<div id="box">
<strong>📦 여기에 추가됩니다</strong>
</div>
<script>
function useAppend() {
const box = document.getElementById('box');
const span = document.createElement('span');
span.textContent = '🟢 append: <b>굵게</b> 안됨 | ';
box.append(span);
}
function useTextContent() {
const box = document.getElementById('box');
box.textContent += '🔴 textContent: <b>태그</b> 무시됨 | ';
}
function useInnerHTML() {
const box = document.getElementById('box');
box.innerHTML += '🔵 innerHTML: <b>굵게</b> 됨 | ';
}
function clearBox() {
const box = document.getElementById('box');
box.innerHTML = '<strong>📦 여기에 추가됩니다</strong>';
}
</script>
</body>
</html>
'js' 카테고리의 다른 글
| DOM 요소 선택 방법 getElementById, querySelector, querySelectorAll (0) | 2025.03.22 |
|---|---|
| DOM 조작이란 (0) | 2025.03.22 |
| indexOf, lastIndexOf, includes 배열이나 문자열에서 특정 값 찾기 (0) | 2025.03.22 |
| 배열의 내용을 합치고 나누는 join과 split (0) | 2025.03.22 |
| 랜덤으로 숫자 뽑기 Math.random() (0) | 2025.03.22 |