• JavaScript HTML DOM - Changing HTML

JavaScript는 동적 HTML 콘텐츠를 만들 수 있습니다.
JavaScript에서, document.write()는 HTML 출력 스트림에 직접 쓸 수 있습니다.

문서가 로딩 된 후에는 document.write()를 절대 사용하지 마세요. 문서를 덮어 씁니다.

HTML 요소의 콘텐츠를 수정하는 가장 쉬운 방법은 innerHTML속성을 사용하는 것입니다.
HTMK 요소의 콘텐츠를 변경하기 위해 하기의 문법(Syntax)을 사용하세요.

document.getElementById(id).innerHTML = new HTML

하기 예제는 p 요소의 콘텐츠를 변경합니다.

New Text!

예제 설명

• 상기 HTML 문서에는 id=“p1”를 가진 p요소가 포함되어 있습니다.
• id=“p1”를 가진 해당 요소를 가져오기 위해 HTML DOM을 사용합니다.
• JavaScript는 해당 요소의 내용(''innerHTML'')을 “New Text!”로 변경합니다.

하기 예제는 h1 요소의 콘텐츠를 변경합니다.

New Heading

JavaScript changed "Old Heading" to "New Heading".

예제 설명

• HTML 문서에는 id=“id01”를 가진 h1요소가 있습니다.
• id=“id01”를 가진 요소를 가져오기 위해 HTML DOM을 사용합니다.
• JavaScript는 해당 요소의 내용(''innerHTML'')을 “New Heading”으로 변경합니다.

HTMK 속성의 값을 변경하기 위해 하기의 문법(Syntax)을 사용하세요.

The original image was paris.jpg, but the script changed it to landscape.jpg

예제 설명

• HTML 문서에는 id=“image”를 가진 img요소가 있습니다.
• id=“image”를 가진 요소를 가져오기 위해 HTML DOM을 사용합니다.
• JavaScript는 해당 요소의 src 속성을 변경하혀 “paris.jpg”에서 “landscape.jpg”로 변경합니다.