======JavaScript HTML DOM - Changing HTML====== * description : JavaScript HTML DOM - Changing HTML * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-22 \\ =====Source of the article==== * [[https://www.w3schools.com/js/js_htmldom_html.asp|JavaScript HTML DOM - Changing HTML]] \\ =====Changing the HTML Output Stream===== JavaScript는 동적 HTML 콘텐츠를 만들 수 있습니다.\\ JavaScript에서, ''document.write()''는 %%HTML%% 출력 스트림에 직접 쓸 수 있습니다.\\ ====예제==== \\ ** FIXME문서가 로딩 된 후에는 ''document.write()''를 절대 사용하지 마세요. 문서를 덮어 씁니다.** \\ =====Changing HTML Content===== %%HTML%% 요소의 콘텐츠를 수정하는 가장 쉬운 방법은 ''innerHTML''속성을 사용하는 것입니다.\\ %%HTMK%% 요소의 콘텐츠를 변경하기 위해 하기의 문법(Syntax)을 사용하세요.\\ document.getElementById(id).innerHTML = new HTML \\ 하기 예제는 ''p'' 요소의 콘텐츠를 변경합니다.\\

Hello World!

\\ 예제 설명\\ * 상기 %%HTML%% 문서에는 ''id="p1"''를 가진 ''p''요소가 포함되어 있습니다. * ''id="p1"''를 가진 해당 요소를 가져오기 위해 %%HTML DOM%%을 사용합니다. * %%JavaScript%%는 해당 요소의 내용%%(''innerHTML'')%%을 "New Text!"로 변경합니다. \\ 하기 예제는 ''h1'' 요소의 콘텐츠를 변경합니다.\\ ====예제====

Old Heading

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

\\ 예제 설명\\ * %%HTML%% 문서에는 ''id="id01"''를 가진 ''h1''요소가 있습니다. * ''id="id01"''를 가진 요소를 가져오기 위해 %%HTML DOM%%을 사용합니다. * %%JavaScript%%는 해당 요소의 내용%%(''innerHTML'')%%을 "New Heading"으로 변경합니다. \\ =====Changing the Value of an Attribute===== %%HTMK%% 속성의 값을 변경하기 위해 하기의 문법(Syntax)을 사용하세요.\\ ====예제==== Paris

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"로 변경합니다. \\ {{tag>오션, Javascript HTML DOM, Changing HTML}}