Bên ngoàiHTML được sử dụng để làm gì?

outerHTML là một thuộc tính JavaScript cho phép bạn lấy và đặt HTML của một phần tử. Ví dụ: nếu bạn có thẻ HTML như sau thì sử dụng thuộc tính outerHTML bạn sẽ nhận được

như đầu ra

Nếu div có các thuộc tính như class hoặc id, bạn sẽ nhận được tất cả các chi tiết đó bằng HTML. outerHTML được sử dụng để trả về hoặc đặt HTML của một phần tử

Đối diện với điều này là thuộc tính innerHTML đặt hoặc trả về văn bản có trong các thẻ. Trong trường hợp này, thuộc tính innerHTML sẽ trả về từ

    
        
This is an old element.
    

    

1 được đính kèm với thẻ HTML div

Hãy lấy một ví dụ về cách lấy và đặt HTML của một phần tử bằng cách sử dụng thuộc tính outerHTML. Chúng tôi hiện có một phần tử div bên trong HTML của chúng tôi với một class của

    
        
This is an old element.
    

    

6

    
Text

Chúng tôi đã thêm một số văn bản bên trong phần tử div. Đầu tiên, chúng ta sẽ xem cách lấy HTML của phần tử trên bằng cách sử dụng thuộc tính outerHTML, sau đó chúng ta sẽ xem cách thay thế hoặc đặt mã HTML này div bằng một phần tử HTML khác

Nhận HTML của một phần tử bằng cách sử dụng outerHTML trong JavaScript

Để lấy HTML của phần tử div, trước tiên chúng ta phải lưu trữ tham chiếu của div bên trong mã JavaScript bằng thuộc tính class của nó và sử dụng phương thức

     
         
This is an old element.
     

     

4, là một phần của DOM API

    
        
This is an old element.
    

    

Vì chúng tôi đang truy cập phần tử bằng tên lớp của nó, chúng tôi cũng phải sử dụng

     
         
This is an old element.
     

     

5 ở cuối vì

     
         
This is an old element.
     

     

4 trả về một mảng vì chúng tôi chỉ có một phần tử có tên lớp đó bên trong DOM của chúng tôi

Do đó, chúng ta sẽ truy cập đến phần tử

     
         
This is an old element.
     

     

5 của mảng. Sau đó, chúng tôi sẽ lưu trữ phần tử đó bên trong biến

    
        
This is an old element.
    

    

6

Để có được HTML của phần tử này được lưu trữ bên trong biến

    
        
This is an old element.
    

    

6, chúng tôi sẽ sử dụng ____14_______ trên biến đó như được hiển thị ở trên mã in nó trên bàn điều khiển

đầu ra

Đặt HTML của một phần tử bằng cách sử dụng outerHTML trong JavaScript

Bây giờ chúng ta hãy xem cách đặt HTML cho cùng một phần tử div mà chúng ta đã lưu trữ bên trong biến

    
        
This is an old element.
    

    

6 bằng cách sử dụng thuộc tính outerHTML

Chúng ta sẽ sử dụng toán tử gán (outerHTML5);

outerHTML chỉ chấp nhận các phần tử HTML ở dạng chuỗi. Do đó, chúng tôi đã gán thẻ outerHTML8 dưới dạng một chuỗi có một số văn bản bên trong nó cho biến

    
        
This is an old element.
    

    

6 bằng cách sử dụng thuộc tính outerHTML

     
         
This is an old element.

Điều này sẽ thay thế toàn bộ phần tử div và giá trị của nó bằng phần tử HTML mới này. Nếu bạn nhìn vào cây DOM, bạn sẽ thấy phần tử HTML div đã được thay thế bằng phần tử HTML outerHTML8

Xem hình bên dưới để biết chi tiết

Phần kết luận

Để lấy HTML của bất kỳ phần tử nào, chúng ta sử dụng thuộc tính outerHTML. Thuộc tính này trả về HTML bên ngoài của một phần tử. Nó có thể thay thế một phần tử HTML bằng một phần tử mới, chỉ cần bỏ qua phần tử HTML mới dưới dạng một chuỗi đối với thuộc tính này

Ví dụ này sử dụng thuộc tính outsideHTML để sao chép một đối tượng, các thuộc tính đi kèm và các phần tử con vào danh sách khi người dùng nhấp vào một trong các đối tượng

Bold text
Italic text
Underlined text
Strikeout text

ghi chú

Nhận xét

Thuộc tính outsideHTML là chỉ đọc trên các đối tượng chú thích, col, colGroup, html, head, body, frameSet, tBody, td, tFoot, th, tHead và tr. Thuộc tính có thể là bất kỳ chuỗi hợp lệ nào chứa tổ hợp văn bản và thẻ. Khi thuộc tính được đặt, chuỗi đã cho sẽ thay thế hoàn toàn đối tượng, bao gồm cả thẻ bắt đầu và thẻ kết thúc. Nếu chuỗi chứa thẻ HTML, chuỗi sẽ được phân tích cú pháp và định dạng khi được đặt vào tài liệu. Bạn chỉ có thể đặt thuộc tính này sau khi sự kiện onload kích hoạt trên cửa sổ. Khi tự động tạo thẻ bằng TextRange, innerHTML hoặc outsideHTML, hãy sử dụng tập lệnh để tạo các sự kiện mới nhằm xử lý các thẻ mới được tạo. Microsoft Visual Basic Scripting Edition (VBScript) không được hỗ trợ. Bạn có thể thay đổi giá trị của phần tử tiêu đề bằng thuộc tính tiêu đề. Để thay đổi nội dung của các phần tử bảng, tFoot, tHead và tr, hãy sử dụng mô hình đối tượng bảng. Ví dụ: sử dụng thuộc tính rowIndex hoặc tuyển tập rows để truy xuất tham chiếu đến một hàng cụ thể của bảng. Bạn có thể thêm hoặc xóa các hàng bằng cách sử dụng các phương thức insertRow và deleteRow. Để truy xuất tham chiếu đến một ô cụ thể, hãy sử dụng thuộc tính cellIndex hoặc bộ sưu tập ô. Bạn có thể thêm hoặc xóa các hàng bằng cách sử dụng các phương thức insertCell và deleteCell. Để thay đổi nội dung của một ô cụ thể, hãy sử dụng thuộc tính InternalHTML. Thuộc tính này có thể truy cập vào thời gian chạy kể từ Microsoft Internet Explorer 5. Loại bỏ các phần tử trong thời gian chạy, trước khi thẻ đóng được phân tích cú pháp, có thể ngăn các vùng khác của tài liệu hiển thị

Khi nào sử dụng bên ngoàiHTML?

Sự khác biệt giữa InternalHTML và OuterHTML là gì?

Mục đích chính của InternalHTML là gì?

Làm cách nào để nhận giá trị bên ngoàiHTML trong JavaScript?