Phương thức insertAdjacentHTML() làm gì trong JavaScript

Hướng dẫn này giải thích mục tiêu, hoạt động và cách sử dụng phương thức “insertAdjacent HTML()” trong JavaScript.

Phương thức “insertAdjacentHTML()” làm gì trong JavaScript?

Các ' insertAdjacentHTML() ” hỗ trợ người dùng chèn mã HTML vào một vị trí cụ thể.

cú pháp

Trong cú pháp trên:

• yếu tố : Nó đại diện cho phần tử HTML được liên kết.
• chức vụ : Nó chỉ định bốn vị trí tương đối của một phần tử HTML, như sau:
• trước khi bắt đầu : Trước phần tử HTML.
• sau khi bắt đầu : Ngay sau phần tử con đầu tiên của phần tử HTML.
• kết thúc : Ở cuối phần tử HTML.
• đi trước : Sau phần tử con cuối cùng của phần tử HTML.
• html : Nó đề cập đến phần tử HTML được chèn vào.

Ví dụ: Áp dụng “insertAdjacentHTML()” để chèn các phần tử ở vị trí tương đối
Ví dụ này áp dụng phương pháp đã thảo luận để chèn các phần tử vào bốn vị trí cụ thể đối với một phần tử cụ thể, tức là, “

”.

---





---

Mã HTML
Đầu tiên, đi qua mã HTML sau:

< h2 > Phương thức insertAdjacentHTML() trong JavaScript < / h2 >
< u nhận dạng = 'thử nghiệm' >
< cái đó > Linux < / cái đó >
< / u >

Trong đoạn mã trên:




• Đầu tiên, tạo một tiêu đề phụ bằng cách sử dụng “

  ' nhãn.

• Tiếp theo, sử dụng “
  ” để tạo danh sách không có thứ tự với id được chỉ định “demo”.
  • Các ' <đó> “ thẻ thêm mục đã nêu trong danh sách.

  Mã JavaScript
  Bây giờ, chuyển sang khối mã JavaScript:

  < kịch bản >
  hãy liệt kê = tài liệu. getElementById ( 'thử nghiệm' ) ;
  danh sách. chènHTML liền kề ( 'trước khi bắt đầu' , '

  Hệ điều hành

  ' ) ;
  danh sách. chènHTML liền kề ( 'sau khi bắt đầu' , '
• Cửa sổ
' ) ;
danh sách. chènHTML liền kề ( 'trước' , '
• Mac OS
' ) ;
danh sách. chènHTML liền kề ( 'hậu quả' , '

Đó là tất cả

' ) ;
kịch bản >

Trong đoạn mã trên:

• Khai báo một biến “ danh sách ” sử dụng “ getElementById() ” phương pháp để tìm nạp bao gồm “
  ” yếu tố bao gồm id “ thử nghiệm ”.
  • Tiếp theo, áp dụng “ insertAdjacentHTML() ” để chèn tiêu đề phụ thông qua thẻ “

    ” trước khi bắt đầu “

    ”, tức là tại “ trước khi bắt đầu ' chức vụ.
    • Sau đó, chèn vật phẩm qua nút “ <đó> ” sau khi bắt đầu thẻ “
      ”, tức là tại “ sau khi bắt đầu ' chức vụ.
      • Một lần nữa, sử dụng ' <đó> “ để thêm một mục danh sách trước khi kết thúc thẻ “
        ”, tức là tại “ đi trước ' chức vụ.
        • Cuối cùng, chèn một đoạn văn với sự trợ giúp của thẻ “

          ” sau khi kết thúc thẻ “

          ” tại “ kết thúc ' chức vụ.

          đầu ra
          

          Như đã thấy, tất cả các phần tử HTML đã xác định được chèn vào vị trí được chỉ định của chúng với sự trợ giúp của “ insertAdjacentHTML() ' phương pháp.

          Phần kết luận

          JavaScript cung cấp một “ insertAdjacentHTML() ” để nối thêm phần tử HTML ở bốn vị trí khác nhau. Nó hướng dẫn trình duyệt điều chỉnh phần tử HTML đã nêu tại “ trước khi bắt đầu ”, “ đi trước ”, “ sau khi bắt đầu ', và ' kết thúc ” vị trí đối với một yếu tố cụ thể. Hướng dẫn này đã thảo luận chi tiết về hoạt động và cách sử dụng phương thức “insertAdjacentHTML()”.