(기초)그래서 뭘 배운거야?/JavaScript
JS-26-inner : 내부 텍스트 가져오기, 갱신하기
Soheny.P
2021. 9. 13. 21:50
728x90
<!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>
</head>
<body>
<div id="div1">
<p>헬로</p>
</div>
<button id="btn1">버튼일</button>
<button id="btn2">버튼이</button>
<button id="btn3">버튼삼</button>
<button id="btn4">버튼사</button>
<script>
// 버튼 누르면 원하는 글씨 추가 또는 변경 하기
document.getElementById("btn1").addEventListener("click", function () {
alert(document.getElementById("div1").innerHTML);
}); // innerHTML 통해 안에 있던 내용 alert로 살펴보기 : 호출
document.getElementById("btn2").addEventListener("click", function () {
document.getElementById("div1").innerHTML = "<h1>졸려</h>";
// inner HTML통해 div1안에 저장된 내용 자체를 바꾸기 : 갱신
});
document.getElementById("btn3").addEventListener("click", function () {
// 엘리먼트 생성
const el1 = document.createElement("h1");
// 엘리먼트 내에 텍스트 생성
let str = document.createTextNode("위에 낑길 문장이여");
// 엘리먼트 위쪽에 아이템 삽입
el1.prepend(str); // <h1>위에 삽입된 문장임</h1>
// div위에 엘리먼트 삽입
document.getElementById("div1").prepend(el1);
});
document.getElementById("btn4").addEventListener("click", function () {
// 엘리먼트 생성
const el1 = document.createElement("h1");
// 엘리먼트 내에 텍스트 생성
let str = document.createTextNode("아래 낑길 문장이여");
// 엘리먼트 아래쪽 아이템 삽입
el1.append(str); // <h1>위에 삽입된 문장임</h1>
// div 아래쪽 엘리먼트 삽입
document.getElementById("div1").append(el1);
});
</script>
</body>
</html>
<!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>
</head>
<body>
<div id="id1">
</div>
<script>
// innerHTML : div 안에 태그 요소를 넣고자 할 경우 사용
document.getElementById("id1").innerHTML = `<h1>헬로</h1>`
// textContent : div 안에 컨텐츠 요소를 넣고자 할 경우 사용 - hmtl5 표준
document.getElementById("id1").textContent = `<h1>헬로</h1>`
// innerText : textContent와 마찬가지로 div안에 컨텐츠 요소 넣고자 할 경우 사용
document.getElementById("id1").innerText = `<h1>헬로</h1>`
</script>
</body>
</html>
728x90