제이스크립트 HTML DOM - HTML 변경

HTML DOM은 JavaScript가 HTML 요소의 내용을 변경할 수 있도록 허용합니다

HTML 출력 스트림 변경

JavaScript는 동적 HTML 내용을 생성할 수 있습니다

JavaScript에서는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 text

이 예제에서는 <p> 요소의 내용:

예제

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "hello kitty!";
</script>
</body>
</html>

직접 시도해보세요

예제 설명:

  • 위의 HTML 문서에는 id="p1"의 <p> 요소가 포함되어 있습니다
  • HTML DOM을 사용하여 id="p1"의 이 요소를 가져왔습니다
  • JavaScript는 이 요소의 내용(innerHTML)을 "Hello Kitty!"으로 변경합니다

이 예제에서는 <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에는 id="header"의 <h1> 요소가 포함되어 있습니다
  • HTML DOM을 사용하여 id="header"의 요소를 가져왔습니다
  • JavaScript이 이 요소의 내용(innerHTML)을 변경합니다

속성 값 변경

HTML 속성 값을 변경하려면 다음과 같은 문법을 사용하십시오:

document.getElementById(id).속성 = new value

이 예제에서는 <img> 요소의 src 속성 값:

예제

<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>

직접 시도해보세요

예제 설명:

  • 위의 HTML 문서에는 id="myImage"의 <img> 요소가 포함되어 있습니다
  • 우리는 id="myImage"의 요소를 가져오기 위해 HTML DOM을 사용합니다
  • JavaScript이 이 요소의 src 속성을 "smiley.gif"에서 "landscape.jpg"로 변경합니다