조회수 확인


JavaScript HTML DOM - Changing HTML

 HTML DOM은 HTML 요소의 내용을 변경 할 수 있게 자바스크립트에게 허용합니다.






1. Changing the HTML Output Stream

 자바스크립트는 동적인 HTML 내용을 만들 수 있습니다.


 document.write()는 HTML 출력 스트림을 직접 작성하는 것 입니다.



1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
    <body>
 
<script>
document.write(Date());
</script>
 
    </body>
</html
 
cs

 


 

 


 


 * 문서가 로드가 된 후, document.write()를 사용하지 마세요. 문서에 덮어쓰게 됩니다.







2. Changing HTML Content

 HTML 요소의 내용을 바꿀때, 아래 문법을 사용합니다.


document.getElementById(id).innerHTML = new HTML






 

3. Changing the Value of an Attribute

 HTMl 요소의 값을 바꾸기 위해서는 아래 문법을 사용합니다.


document.getElementById(id).attribute=new value




 아래 예제는 <img> 요소의 src 속성을 변경하는 예제 입니다:




1
2
3
4
5
6
7
8
9
10
11
12
13
 
<!DOCTYPE html>
<html>
<body>
 
<img id="myImage" src="smiley.gif">
 
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
 
</body>
</html>
cs
 

 


 



다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다