본문 바로가기

Javascript

innerHTML

innerHTML을 이용하여 html 콘텐츠 동적 변경

 

아래에 화면 결과
아래에 코드있어요

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function change() {
            var p =document.getElementById("firstP");
            p.innerHTML = "나의 <img src='media/puppy.png'>강아지";
        }
    </script>
</head>
<body>
    <p id="firstP" style="color:blue;" onclick="change()">여기에
        <span style="color: red;">클릭하세요.</span></p>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

'Javascript' 카테고리의 다른 글

document 객체.html  (0) 2020.03.17
this  (0) 2020.03.12
CSS 동적변경  (0) 2020.03.11
HTML 태그 요소 5가지!  (0) 2020.03.11
통장  (0) 2020.03.11