JavaScript HTML DOM - Changing HTML
HTML DOM 은 JavaScript 로 HTML 요소의 내용을 변경할 수 있게 해줍니다.
Changing the HTML Output Stream
JavaScript 는 동적인 HTML 내용을 생성할 수 있습니다:
Date:
JavaScript 에서 document.write() 는 HTML 출력 스트림(stream)에 직접 쓰는데 사용될 수 있다. :
Example
<!DOCTYPE
html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
Try it Yourself »  |
document 가 로드된 다음에 document.write()를 절대 사용하지 마시오. 문서를 덮어 쓰게 됩니다. |
|---|
Changing HTML Content
HTML 요소의 내용을 수정하는 가장 쉬운 방법은 innerHTML 속성을 사용하는 것입니다..
HTML 요소의 내용을 변경하려면, 다음 구문을 사용합니다.:
document.getElementById(id).innerHTML = new HTML
이 예는 <p> 요소의 내용을 변경합니다.:
Example
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML
= "New text!";
</script>
</body>
</html>
Try
it Yourself » 이 예는 <h1> 요소의 내용을 변경합니다.:
Example
<!DOCTYPE
html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element =
document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>
Try it Yourself » Example explained:
- 위의 HTML document 는 id="header" 인 <h1> 요소를 포함한다.
- id="header" 인 요소를 얻기 위해서 HTML DOM 을 사용한다.
- JavaScript 는 요소의 내용(innerHTML)을 변경한다.
Changing the Value of an Attribute
HTML 속성(attribute)을 변경하려면 다음의 구문을 사용한다.:
document.getElementById(id).attribute=new value
이 예는 <img> 요소의 src 속성의 값을 변경한다.:
Example
<!DOCTYPE
html>
<html>
<body>
<img id="myImage"
src="smiley.gif">
<script>
document.getElementById("myImage").src
= "landscape.jpg";
</script>
</body>
</html>
Try it Yourself » Example explained:
- 위의 HTML document 는 id="image" 인 <img> 요소를 포함한다.
- id="image" 인 요소를 얻기 위해서 HTML DOM 을 사용한다.
- JavaScript 는 그 요소의 src 속성을 "smiley.gif" 에서 "landscape.jpg"로 변경한다.
Test Yourself with Exercises!
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »