반응형
간단한 예제로 innerHTML을 사용해보았다.
아래 파란글씨를 클릭하게 되면 innerHTML에 있는 문자열로 바뀌게된다.
innerHTML활용
유석영은 누구일까? 클릭해보자.
<코드>
<!DOCTYPE html>
<html>
<head>
<title>innerHTML활용</title>
<script>
function change() {
var p = document.getElementById("firstP");
p.innerHTML= "20대이면서 자바스크립트를 공부하는 학생이다.";
}</script>
</head>
<body>
<h3>innerHTML활용</h3>
<hr>
<p id="firstP" style="color:blue" onclick="change()">유석영은 누구일까? 클릭해보자.</p>
</body>
</html>
반응형
'Language > HTML, JS' 카테고리의 다른 글
| [HTML, JS] 두개의 주사위 눈의 합 경우의 수 (0) | 2022.10.20 |
|---|---|
| [HTML, JS] localStorage (로컬스토리지) 활용 예제 (0) | 2022.10.19 |
| [HTML, JS] DIV와 List를 이용한 문서의 동적 구성 (0) | 2022.10.18 |
반응형
간단한 예제로 innerHTML을 사용해보았다.
아래 파란글씨를 클릭하게 되면 innerHTML에 있는 문자열로 바뀌게된다.
innerHTML활용
유석영은 누구일까? 클릭해보자.
<코드>
<!DOCTYPE html>
<html>
<head>
<title>innerHTML활용</title>
<script>
function change() {
var p = document.getElementById("firstP");
p.innerHTML= "20대이면서 자바스크립트를 공부하는 학생이다.";
}</script>
</head>
<body>
<h3>innerHTML활용</h3>
<hr>
<p id="firstP" style="color:blue" onclick="change()">유석영은 누구일까? 클릭해보자.</p>
</body>
</html>
반응형
'Language > HTML, JS' 카테고리의 다른 글
| [HTML, JS] 두개의 주사위 눈의 합 경우의 수 (0) | 2022.10.20 |
|---|---|
| [HTML, JS] localStorage (로컬스토리지) 활용 예제 (0) | 2022.10.19 |
| [HTML, JS] DIV와 List를 이용한 문서의 동적 구성 (0) | 2022.10.18 |
