JavaScript - Thay đổi HTML

Xin chào các pháp sư JavaScript tương lai! Chào mừng các bạn đến với hành trình thú vị vào thế giới của các trang web động. Hôm nay, chúng ta sẽ khám phá cách JavaScript có thể thực hiện phép màu để thay đổi HTML trên không. Hãy thắt chặt dây an toàn, vì đến cuối bài học này, bạn sẽ có thể làm cho các trang web của mình nhảy theo điệu nhạc của bạn!

Thay đổi HTML bằng JavaScript

Trước khi chúng ta bắt đầu, hãy cùng nhau admire sức mạnh mà chúng ta sắp nắm giữ. Hãy tưởng tượng bạn là một họa sĩ, và HTML của bạn là canvas. JavaScript giống như một cọ vẽ ma thuật có thể thay đổi màu sắc, thêm các phần tử mới, hoặc thậm chí xóa bỏ một phần của bức tranh của bạn ngay lập tức. Đ酷, phải không?

Bây giờ, hãy cùng nhìn vào các cách khác nhau mà chúng ta có thể thay đổi HTML của mình bằng JavaScript.

Thay đổi HTML bằng thuộc tính innerHTML

Thuộc tính innerHTML giống như một cửa sổ vào nội dung của một phần tử HTML. Nó cho phép chúng ta nhìn vào bên trong và thậm chí thay đổi những gì có trong đó. Hãy bắt đầu với một ví dụ đơn giản:

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

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

Trong ví dụ này, chúng ta đang yêu cầu JavaScript tìm phần tử có id "myDiv" và thay đổi nội dung của nó thành "Hello, JavaScript!". Đó giống như chúng ta đang sử dụng cọ vẽ ma thuật để xóa bỏ "Hello, World!" và viết điều mới.

Thay đổi HTML bằng thuộc tính outerHTML

Trong khi innerHTML thay đổi nội dung bên trong một phần tử, outerHTML đi một bước xa hơn và thay thế toàn bộ phần tử, bao gồm cả thẻ của nó. Dưới đây là cách nó hoạt động:

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

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

Trong trường hợp này, chúng ta không chỉ thay đổi văn bản, mà còn chuyển đổi thẻ <p> thành thẻ <h2>. Đó giống như biến một con sâu thành một con bướm!

Thay thế phần tử HTML bằng phương thức replaceWith()

Phương thức replaceWith() là một cách khác để thay thế các phần tử. Nó giống như một phiên bản linh hoạt hơn của outerHTML. Hãy xem nó trong hành động:

<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>

Ở đây, chúng ta đang tạo một <div> mới, cho nó một nội dung, và sau đó sử dụng nó để thay thế <div> cũ. Đó giống như đổi xe cũ lấy một mẫu xe mới sáng bóng!

Thay đổi giá trị của thuộc tính của phần tử HTML

Đôi khi, chúng ta không cần thay đổi toàn bộ phần tử, chỉ cần một trong các thuộc tính của nó. JavaScript cũng làm điều này dễ dàng:

<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>

Trong ví dụ này, chúng ta đang thay đổi cả thuộc tính src và alt của hình ảnh. Đó giống như cập nhật ảnh đại diện của bạn!

Thêm một phần tử mới vào phần tử HTML

Bây giờ, hãy học cách thêm hoàn toàn mới phần tử vào trang của chúng ta:

<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>

Ở đây, chúng ta đang tạo một <li> mới, cho nó một nội dung, và sau đó thêm nó vào danh sách của chúng ta. Đó giống như thêm một người bạn mới vào nhóm ảnh của bạn!

Xóa bỏ một phần tử con từ phần tử HTML

Đôi khi, chúng ta cần xóa bỏ các phần tử khỏi trang của mình. Dưới đây là cách chúng ta có thể làm điều đó:

<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>

Trong ví dụ này, chúng ta đang tìm một phần tử cụ thể trong danh sách của mình và xóa bỏ nó. Đó giống như gạch bỏ một mục trong danh sách công việc của bạn!

Sử dụng phương thức document.write()

Cuối cùng, hãy cùng nhìn vào phương thức document.write(). Đây là một công cụ mạnh mẽ, nhưng hãy sử dụng nó với sự cẩn thận:

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

Phương thức này ghi trực tiếp vào đầu ra HTML. Đó giống như có một线路 trực tiếp đến trang web! Tuy nhiên, hãy cẩn thận - nếu bạn sử dụng document.write() sau khi trang đã tải xong, nó sẽ ghi đè toàn bộ trang.

Dưới đây là bảng tóm tắt tất cả các phương thức chúng ta đã xem xét:

Phương thức	Mô tả
innerHTML	Thay đổi nội dung bên trong một phần tử
outerHTML	Thay thế toàn bộ phần tử, bao gồm cả thẻ của nó
replaceWith()	Thay thế một phần tử bằng một phần tử mới
Thay đổi thuộc tính	Chỉnh sửa các thuộc tính cụ thể của một phần tử
appendChild()	Thêm một phần tử con mới
removeChild()	Xóa bỏ một phần tử con
document.write()	Ghi trực tiếp vào đầu ra HTML

Nhớ rằng, với quyền lực lớn đi kèm với trách nhiệm lớn. Các công cụ này cho phép bạn tạo ra các trang web động, tương tác, nhưng hãy luôn suy nghĩ về cách thay đổi của bạn sẽ ảnh hưởng đến trải nghiệm người dùng.

Thực hành các phương thức này, thử nghiệm với các kết hợp khác nhau, và sớm bạn sẽ tạo ra các trang web sống động với sự tương tác. Chúc mừng编码, và hy vọng hành trình JavaScript của bạn sẽ đầy乐趣 và khám phá!

Credits: Image by storyset