<!DOCTYPE html>
<html lang="ko">
<head>
<title>DOM - 특정 엘리먼트 찾아가기 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1 id="title">제목</h1>
<div id="append"></div>
<p class="paragraph">1번째 단락</p>
<p class="paragraph">2번째 단락</p>
<p class="paragraph">3번째 단락</p>
<hr>
<script src="js/dom-ex02.js"></script>
</body>
</html>
id 를 통해 append 에 content 로 h3 태그와 div 넣어준다고 할 때
const append = document.getElementById('append');
append.innerHTML = '<h3>추가된 제목</h3><div>추가 !</div>'
console.log('append.innerText >> ', append.innerText)
웹 브라우저 개발자 도구에서 소스탭에서 확인해보면
innerHTML 은 태그까지 다 들어오지만,
innerText 는 text 만 ! 들어온다
'Language > HTML & CSS & JavaScript' 카테고리의 다른 글
[Javascript] Element.classList 속성, 자바스크립트로 클래스 추가/제거 하기 (0) | 2024.05.29 |
---|---|
[프로젝트] 행복한 마켓 - 1. HTML, CSS 설정 (0) | 2024.05.29 |
004. 웹 표준 활용 Web Front 개발 - JavaScript (1) | 2024.05.20 |
[HTML/CSS] float 을 활용하여 ul 태그로 메뉴 레이아웃 잡기 (0) | 2024.05.16 |
[HTML/CSS] float 을 활용하여 레이아웃 잡고, 해제하기 (0) | 2024.05.16 |