자바 스크립트 HTML DOM은 HTML 내용을 변경
HTML DOM 자바 스크립트는 HTML 요소의 내용을 변경할 수있다.
HTML 출력 스트림을 변경
자바 스크립트는 동적 HTML 콘텐츠를 생성 할 수 있습니다 :
오늘의 날짜 :
자바 스크립트에서 document.write를 ()는 직접 출력 스트림에 HTML 콘텐츠를 작성하는 데 사용할 수 있습니다.
 | 문서가로드 완료 후 document.write를 사용하지 마십시오 (). 이 문서를 대체합니다. |
|---|
HTML 내용을 변경
innerHTML을 재산을 가장 쉬운 방법을 사용하면 HTML 내용을 수정합니다.
HTML 엘리먼트의 콘텐츠를 변경하기 위해이 구문을 사용
document.getElementById(id).innerHTML=新的 HTML
이 예에서는 <p> 요소의 내용을 변경한다 :
예
<HTML>
<바디>
<P 아이디 = "P1"> 안녕하세요! </ P>
<스크립트>
중요 document.getElementById ( "P1") innerHTML을 = "새 텍스트!";
</ 스크립트>
</ BODY>
</ HTML>
<바디>
<P 아이디 = "P1"> 안녕하세요! </ P>
<스크립트>
중요 document.getElementById ( "P1") innerHTML을 = "새 텍스트!";
</ 스크립트>
</ BODY>
</ HTML>
»시도
이 예에서는 <H1> 요소의 내용을 변경한다 :
예
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
</body>
</html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
</body>
</html>
»시도
예를 설명하기 :
- 의 <H1> 요소의 ID = "헤더"를 포함 위의 HTML 문서
- 우리는 ID를 얻기 위해 HTML의 DOM을 사용 = "헤더"요소
- 자바 스크립트를이 요소의 내용의 변경 (innerHTML을)
는 HTML 속성 변경
HTML 요소의 속성을 변경하려면 다음 구문을 사용합니다 :
document.getElementById(id).attribute=新属性值
이 예는 src 속성 <IMG> 요소를 변경합니다
예
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
»시도
예를 설명하기 :
- 의 <IMG> 요소의 ID = "이미지"를 포함 위의 HTML 문서
- 우리는 ID를 얻기 위해 HTML의 DOM을 사용 = "이미지"요소
- 자바 스크립트는 ( "landscape.jpg"에 "smiley.gif")이 요소의 속성을 변경