- textcontent는 태그를 해석하지 않고
- innerhtml은 태그를 해석한다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function() {
let header = document.querySelectorAll("h1")[2];
// header.textContent = "<span>hello</span>";
// textContent 속성은 텍스트만을 처리하므로 HTML 태그를 해석하지 않습니다. 따라서 결과적으로 <span>hello</span>이 그대로 출력됩니다.
// 만약 header.innerHTML을 사용한다면 HTML 태그를 해석하여 내용을 변경할 수 있습니다.
header.innerHTML ="<span>hello</span>";
header.style.color = "blue";
}
</script>
</head>
<body>
<h1>header</h1>
<h1>header</h1>
<h1>header</h1>
</body>
</html>연습1)textcontent
innerhtml
연습2)textcontent
innerhtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function () {
let output = "";
for (var i = 0; i < 256; i++) {
output += "<div></div>";
}
document.body.innerHTML = output;
// document.body.textContent = output;
let divs = document.querySelectorAll("div");
for (var i = 0; i < divs.length; i++) {
let div = divs[i];
div.style.height = "2px";
div.style.background = "rgb(" + i + "," + i + "," + i + ")";
//그라데이션 rgb 000 -> rgb 111 .....
}
}
</script>
</head>
<body>
</body>
</html>
'Javascript > 이론' 카테고리의 다른 글
| 이벤트(setInterval/button ( inline, inline아닌 경우) (0) | 2023.05.30 |
|---|---|
| set(get)Attribute/image경로 (0) | 2023.05.30 |
| 객체/for in 반복문/charAt/substring/replace/window.onload/querySelector(All)/getElementById (0) | 2023.05.26 |
| document.write/삼항연산자/style/[배열]/function/함수실행/매개변수/콜백함수 (0) | 2023.05.26 |
| Javascript(alert/ ===/ 변수(let)/ prompt/호이스팅 (0) | 2023.05.26 |
