되는 HTML DOM 자바 스크립트 HTML 요소의 내용을 변경할 수 있습니다.
HTML 출력 스트림 변경
자바 스크립트는 동적 HTML 콘텐츠를 생성 할 수 있습니다 :
날짜:일 2016년 11월 6일 19시 23분 35초 (그리니치 표준시) + 0800 (中国标准时间)
자바 스크립트에서 document.write() HTML 출력 스트림에 직접 작성하는 데 사용할 수 있습니다 :
예
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
»그것을 자신을 시도 사용하지 마십시오 document.write() 문서가로드 된 후입니다. 이 문서를 덮어 쓰게됩니다.
HTML 내용 변경
HTML 요소의 내용을 수정하는 가장 쉬운 방법은 사용하는 것입니다 innerHTML 속성을.
HTML 요소의 내용을 변경하기 위해이 구문을 사용
document.getElementById(id).innerHTML = new HTML
이 예제의 내용 변경 <p> 요소를 :
예
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
»그것을 자신을 시도 이 예제의 내용 변경 <h1> 요소를 :
예
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>
»그것을 자신을 시도 예 설명 :
- HTML 문서는 위의 포함 <h1> 과 요소 id="header"
- 우리는 함께 요소를 얻기 위해 HTML의 DOM을 사용하여 id="header"
- 자바 스크립트는 콘텐츠 변경 (innerHTML) 그 요소를
속성의 값 변경
하는 HTML 속성 값을 변경하려면이 구문을 사용합니다 :
document.getElementById(id).attribute=new value
이 예제의 src 속성의 값 변경 <img> 요소를 :
예
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
»그것을 자신을 시도 예 설명 :
- HTML 문서는 위의 포함 <img> 와 요소 id="myImage"
- 우리는 함께 요소를 얻기 위해 HTML의 DOM을 사용하여 id="myImage"
- 자바 스크립트는 변화 src 에서 해당 요소의 속성 "smiley.gif" 을 "landscape.jpg"