자바스크립트 HTML DOM – HTML 변경

JavaScript는, HTML DOM으로, HTML 요소의 내용을 변경할 수 있습니다.


HTML 출력 스트림(Output Stream) 변경

자바 스크립트는 동적(dynamic) HTML 콘텐츠를 생성할 수 있습니다:

Date:

자바스크립트는 document.write()를 사용하여 HTML 출력 스트림(output stream)에 직접 쓸 수 있습니다:

Example

Tue Feb 13 2018 15:37:23 GMT+0900 (대한민국 표준시)


HTML 내용(content) 변경

HTML 요소의 내용을 수정하는 가장 쉬운 방법은 innerHTML 속성을 사용하는 것입니다.

HTML 요소의 내용을 변경하려면 다음 구문을 사용하십시오:

이 예제는 <p> 요소의 내용을 변경합니다:

Example

New text!

위 문단은 스크립트로 변경되었습니다.

예제 설명:

  • 위의 HTML 문서는 id="p1"인 <p> 요소가 있습니다.
  • HTML DOM을 사용하여 id="p1"인 요소를 가져옵니다.
  • 자바스크립트는 해당 요소의 내용 (innerHTML)을 “New text!”로 변경합니다.

이 예제는 <h1> 요소의 내용을 변경합니다:

Example

New Heading

자바스크립트는 “Old Heading”을 “New Heading”으로 변경했습니다.

예제 설명:

  • 위의 HTML 문서에는 id="id01"인 <h1> 요소가 포함되어 있습니다.
  • HTML DOM을 사용하여 id = “id01″인 요소를 가져옵니다.
  • 자바스크립트는 해당 요소의 내용 (innerHTML)을 “New Heading”으로 변경합니다.

속성(Attribute) 값 변경

HTML 속성 값(value of an HTML attribute)을 변경하려면 다음 구문을 사용하십시오:

이 예제는 <img> 요소의 src 속성(attribute) 값을 변경합니다:

Example

원래 이미지는 smiley.gif였지만, 스크립트가 landscape.jpg로 변경했습니다.

예제 설명:

  • 위의 HTML 문서에는 id="myImage"인 <img> 요소가 있습니다.
  • HTML DOM을 사용하여 id="myImage"인 요소를 가져옵니다.
  • 자바 스크립트는 해당 요소의 src 속성(attribute)을 “smiley.gif”에서 “landscape.jpg”로 변경합니다.

출처: JavaScript HTML DOM – Changing HTML

답글 남기기