JavaScript - HTML 변경

안녕하세요, 미래의 JavaScript 마법사 여러분! 동적인 웹 페이지의 세상으로 여러분을 초대합니다. 오늘 우리는 JavaScript가 HTML을 실시간으로 어떻게 변경할 수 있는지 탐구해볼 것입니다. 안전벨트를 채우세요,因为这个课程结束时, 여러분은 자신만의 웹 페이지를 춤추게 만드는 능력을 갖게 될 것입니다!

JavaScript로 HTML 변경하기

들어가기 전에, 잠시 우리가 사용할 힘의 강력함을 감상해보겠습니다. 상상해보세요, 여러분은 화가이고, 여러분의 HTML은 여러분의 캔버스입니다. JavaScript는 색상을 바꾸거나 새로운 요소를 추가하거나 심지어 그림의 일부를 즉시 지우는 마법의 붓과 같습니다. 멋지죠?

이제 JavaScript를 사용하여 HTML을 변경할 수 있는 다양한 방법을 살펴보겠습니다.

innerHTML 속성을 사용하여 HTML 변경하기

innerHTML 속성은 HTML 요소의 내용을 들여다보고 심지어 변경할 수 있는 창이 됩니다. 간단한 예제로 시작해보겠습니다:

<div id="myDiv">Hello, World!</div>

<script>
document.getElementById("myDiv").innerHTML = "Hello, JavaScript!";
</script>

이 예제에서 우리는 JavaScript가 id가 "myDiv"인 요소를 찾아 그 내용을 "Hello, JavaScript!"로 변경하도록 합니다. 마법의 붓을 사용하여 "Hello, World!"를 지우고 새로운 것을 쓰는 것과 같습니다.

outerHTML 속성을 사용하여 HTML 변경하기

innerHTML은 요소 내부의 내용을 변경하지만, outerHTML은 한 단계 더 나아가 요소와 그 태그를 모두 변경합니다. 다음은 그 작동 방식입니다:

<p id="myParagraph">This is a paragraph.</p>

<script>
document.getElementById("myParagraph").outerHTML = "<h2>This is now a heading!</h2>";
</script>

이 경우 우리는 단순히 텍스트를 변경하는 것이 아니라, <p> 태그를 <h2> 태그로 변환합니다. 그 caterpillar을 butterfly로 변환하는 것과 같습니다!

replaceWith() 메서드를 사용하여 HTML 요소 변경하기

replaceWith() 메서드는 또 다른 요소 교체 방법입니다. outerHTML의 더 유연한 버전입니다. 다음은 그 작동 방식입니다:

<div id="oldDiv">I'm feeling old.</div>

<script>
let oldDiv = document.getElementById("oldDiv");
let newDiv = document.createElement("div");
newDiv.innerHTML = "I'm fresh and new!";
oldDiv.replaceWith(newDiv);
</script>

여기서 우리는 새로운 <div>를 생성하고 내용을 주입한 후, 기존 <div>를 교체합니다. 오래된 차를 반짝이는 새 차로 교환하는 것과 같습니다!

HTML 요소의 속성 값을 변경하기

occasionally, we don't need to change the whole element, just one of its attributes. JavaScript makes this easy too:

<img id="myImage" src="old-image.jpg" alt="An old image">

<script>
document.getElementById("myImage").src = "new-image.jpg";
document.getElementById("myImage").alt = "A brand new image";
</script>

이 예제에서 우리는 이미지의 src와 alt 속성을 모두 변경합니다. 프로필 사진을 빠르게 업데이트하는 것과 같습니다!

HTML 요소에 새로운 요소 추가하기

이제 우리는 페이지에 완전히 새로운 요소를 추가하는 방법을 배우겠습니다:

<ul id="myList">
<li>First item</li>
<li>Second item</li>
</ul>

<script>
let newItem = document.createElement("li");
newItem.innerHTML = "Third item";
document.getElementById("myList").appendChild(newItem);
</script>

여기서 우리는 새로운 <li> 요소를 생성하고 내용을 주입한 후, 목록에 추가합니다. 새로운 친구를 그룹 사진에 추가하는 것과 같습니다!

HTML 요소의 자식 요소 제거하기

occasionally, we need to remove elements from our page. Here's how we can do that:

<ul id="myList">
<li>Item to keep</li>
<li id="removeMe">Item to remove</li>
<li>Another item to keep</li>
</ul>

<script>
let list = document.getElementById("myList");
let itemToRemove = document.getElementById("removeMe");
list.removeChild(itemToRemove);
</script>

이 예제에서 우리는 목록의 특정 항목을 찾아 제거합니다. 할 일 목록에서 항목을 취소하는 것과 같습니다!

document.write() 메서드 사용하기

마지막으로, document.write() 메서드를 살펴보겠습니다. 이는 강력한 도구이지만, 신중하게 사용해야 합니다:

<script>
document.write("<h1>Hello, World!</h1>");
</script>

이 메서드는 HTML 출력에 직접 씁니다. 페이지가 로드된 후 document.write()를 사용하면 전체 페이지를 덮어쓰게 됩니다.

이제 우리가 다루었던 모든 메서드를 요약하는 표를 제공합니다:

메서드	설명
innerHTML	요소 내부의 내용을 변경합니다
outerHTML	요소와 그 태그를 모두 변경합니다
replaceWith()	요소를 새로운 요소로 교체합니다
속성 변경	요소의 특정 속성을 수정합니다
appendChild()	새로운 자식 요소를 추가합니다
removeChild()	자식 요소를 제거합니다
document.write()	HTML 출력에 직접 씁니다

기억하십시오, 강력한 힘은 큰 책임을 동반합니다. 이 도구들은 동적인, 상호작용적인 웹 페이지를 만드는 능력을 제공하지만, 사용자 경험에 미치는 영향을 항상 고려하세요.

이 메서드들을 연습하고, 다양한 조합을 시험해보세요. 그러면 곧 상호작용적인 웹 페이지를 만드는 데 성공할 것입니다. 즐거운 코딩을 기원하며, JavaScript 여정이 즐거움과 발견으로 가득 차기를 바랍니다!

Credits: Image by storyset