문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

======JavaScript HTML DOM - Changing HTML======
<WRAP left notice 80%>
  * description : JavaScript HTML DOM - Changing HTML 
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-22
</WRAP>
<WRAP clear></WRAP>
\\
=====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%% 출력 스트림에 직접 쓸 수 있습니다.\\
====예제====
<HTML>
<body>
    <script>
        document.write(Date());
    </script>
</body>
</html>
</HTML>
\\
** FIXME문서가 로딩 된 후에는 ''document.write()''를 절대 사용하지 마세요. 문서를 덮어 씁니다.**
\\
=====Changing HTML Content=====
%%HTML%% 요소의 콘텐츠를 수정하는 가장 쉬운 방법은 ''innerHTML''속성을 사용하는 것입니다.\\
%%HTMK%% 요소의 콘텐츠를 변경하기 위해 하기의 문법(Syntax)을 사용하세요.\\
<code>
document.getElementById(id).innerHTML = new HTML
</code>
\\
하기 예제는 ''p'' 요소의 콘텐츠를 변경합니다.\\
<HTML>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New Text!";
</script>

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

<h1 id="id01">Old Heading</h1>

<p>JavaScript changed "Old Heading" to "New Heading".</p>

<script>
var element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>

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

<img id="image" src="paris.jpg" width="160" height="120" alt="Paris">

<p>
The original image was paris.jpg, but the script changed it to landscape.jpg
</p>

<script>
document.getElementById("image").src = "landscape.jpg";
</script>

</body>
</HTML>
\\
예제 설명\\
  * %%HTML%% 문서에는 ''id="image"''를 가진 ''img''요소가 있습니다.
  * ''id="image"''를 가진 요소를 가져오기 위해 %%HTML DOM%%을 사용합니다.
  * %%JavaScript%%는 해당 요소의 ''src'' 속성을 변경하혀 "paris.jpg"에서 "landscape.jpg"로 변경합니다.
\\


{{tag>오션, Javascript HTML DOM, Changing HTML}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구