예제 8-3. innerHTML을 이용하여 HTML 콘텐츠 동적 변경
WEB/JAVASCRIPT-CONCEPT 2017. 10. 30. 13:57 |* DOM 객체의 innerHTML 프로퍼티
DOM 객체의 innerHTML 프로퍼티는 시작 태그와 종료 태그 사이에 들어 있는 HTML 컨텐츠를 나타내는 문자열 정보이다
ex)
<p id="first" style="color:blue">
여기에<span style="color:red">클릭하세요.</span> <- innerHTML
</p>
innerHTML 프로퍼티를 이용하면 다음과 같이 <p></p>사이의 HTML 텍스트를 읽을 수 있다.
ex)
var p = document.getElementById("firstP");
var next = p.innerHTML;
다음 자바스크립트 코드는 <p> 태그의 텍스트를 지우고 강아지 이미지를 삽입한다.
ex)
p.innerHTML = "나의 <img src='puppy.jpg'> 강아지 입니다."
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>innerHTML 활용</title> <script> function change() { var p = document.getElementById("firstP"); p.innerHTML= "나의 <img src='media/puppy.png'> 강아지"; } </script> </head> <body> <h3>innerHTML 활용 : 아래 글자에 클릭하면 예쁜 강아지가 보입니다.</h3> <hr> <p id="firstP" style="color:blue" onclick="change()">여기에 <span style="color:red">클릭하세요</span> </p> </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 8-5. document 객체의 프로퍼티 출력 (0) | 2017.10.31 |
|---|---|
| 예제 8-4. this 활용 (0) | 2017.10.30 |
| 예제 8-2. 자바스크립트로 <span>태그의 CSS3 스타일 동적 변경 (0) | 2017.10.30 |
| 예제 8-1. DOM 객체의 구조 출력 : p 객체 사례 (0) | 2017.10.30 |
| 예제 7-9. new Object()로 계좌를 표현하는 account 객체 만들기. 예제 7-10. 리터럴 표기법으로 계좌를 표현하는 account 객체 만들기 (0) | 2017.10.30 |