Sự khác biệt giữa HTML bên trong và bên ngoài
Hai thuộc tính này khá mô tả, khi bạn hiểu ngữ cảnh của chúng.
Các thuộc tính DOM bên trongHTML và bên ngoàiHTML cho phép bạn đọc và viết nội dung trên một trang web. Bạn có thể sử dụng chúng để tìm nạp đánh dấu hoặc thực hiện các thay đổi đối với nó và cả hai đều giống nhau về nhiều mặt. Nhưng có một sự khác biệt đáng kể.
Khi làm việc với DOM, bạn sẽ sử dụng InternalHTML và OuterHTML hoàn toàn khác nhau. Tìm hiểu cách sử dụng hai thuộc tính này với các ví dụ thực tế.
Mục Lục
HTML bên trong là gì?
Thuộc tính innerHTML là một phần của DOM và bạn có thể truy cập nó qua JavaScript. Bạn có thể sử dụng nó để lấy hoặc đặt nội dung của một phần tử. Nội dung này không bao gồm thẻ riêng của phần tử và chỉ bao gồm phần đánh dấu đại diện cho phần tử con của phần tử, ở dạng chuỗi.
Xem xét mẫu mã này:
<html><body>
<p id="myP">I am a paragraph.</p>
<script>
document.getElementById("myP").innerHTML = "Hello World";
</script>
</body>
</html>
Trong trình duyệt của mình, bạn sẽ thấy một đoạn tiêu chuẩn với văn bản thay thế, như sau:
Thuộc tính InternalHTML chọn và thay đổi nội dung của
phần tử trong ví dụ này.
HTML bên ngoài là gì?
Thuộc tính outsideHTML giống như internalHTML theo nhiều cách. Bạn có thể sử dụng nó để lấy hoặc đặt nội dung của phần tử đã chọn. Tuy nhiên, nó cũng đặt đánh dấu đại diện cho chính phần tử đó. Điều này bao gồm thẻ mở, bất kỳ thuộc tính nào và—nếu có liên quan—thẻ đóng.
Xem lại ví dụ trước để xem outsideHTML khác nhau như thế nào:
<html><body>
<p id="myP">I am a paragraph.</p>
<script>
document.getElementById("myP").outerHTML = "<h1>This H1 replaced a paragraph.</h1>"
</script>
</body>
</html>
Trong trình duyệt của bạn, bạn sẽ thấy một cái gì đó như thế này:
Trong ví dụ này, thuộc tính outsideHTML thay đổi P phần tử thành một h1 yếu tố.
Biết sự khác biệt và khi nào nên sử dụng các thuộc tính này
Các thuộc tính DOM bên trongHTML và bên ngoàiHTML có nhiều điểm tương đồng, nhưng có một điểm khác biệt chính. Thuộc tính innerHTML nắm bắt nội dung HTML của một phần tử. Ngược lại, thuộc tính outsideHTML nắm bắt HTML đại diện cho chính phần tử đó và nội dung của nó.
Bạn có thể sử dụng các thuộc tính này để đọc và ghi nội dung HTML thông qua DOM. DOM sẽ là một khái niệm phổ biến, quan trọng trong suốt quá trình phát triển JavaScript của bạn.