자바스크립트 HTML

JavaScript HTML DOM - HTML 변경

HTML DOM을 사용하면 JavaScript가 HTML 요소의 콘텐츠를 변경할 수 있습니다.

HTML 출력 스트림 변경

JavaScript는 동적 HTML 콘텐츠를 생성할 수 있습니다.

오늘 날짜: Wed Oct 26 2016 10:01:53 GMT+0800(China Standard Time)

JavaScript에서는 document.write( )를 사용할 수 있습니다. HTML 출력 스트림에 직접 콘텐츠를 쓰는 데 사용됩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
document.write(Date());
</script>
</body>
</html>

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

HTML 콘텐츠 변경

HTML 콘텐츠를 수정하는 가장 쉬운 방법은 innerHTML 속성을 사용하는 것입니다.

HTML 요소의 내용을 변경해야 하는 경우 다음 구문을 사용하세요.

document.getElementById(id).innerHTML=new HTML

이 예에서는 <h1> 요소의 내용을 변경합니다.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
</body>
</html>

설명 예:

위 HTML 문서에는 id="header"인 <h1> 요소가 포함되어 있습니다.
우리는 HTML DOM을 사용하여 id="header"인 요소를 가져옵니다.
JavaScript는 이 요소의 내용을 변경합니다(innerHTML)

HTML 속성 변경

HTML 요소의 속성을 변경해야 하는 경우 다음 구문을 사용하세요.

document.getElementById(id).attribute=new 속성 값

이 예에서는 HTML 요소의 src 속성을 변경합니다. <img> 요소:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<img id="image" src="smiley.gif" width="160" height="120">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
<p>原图片为 smiley.gif,脚本将图片修改为 landscape.jpg</p>
</body>
</html>

예제 설명:

위의 HTML 문서에는 id가 "image"인 <img> 요소가 포함되어 있습니다.

우리는 HTML DOM을 사용하여 id가 "image"인 요소를 가져옵니다.

JavaScript는 이 요소의 속성을 변경합니다("../style/images" /smiley.gif"를 "../style/images/landscape.jpg"로 변경)

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p id="p1">Hello World!</p> <script> document.getElementById("p1").innerHTML="新文本!"; </script> <p>以上段落通过脚本修改文本。</p> </body> </html>

제출하다 코드 재설정

자동운전