Hiển thị mã html dưới dạng văn bản javascript

Các phần tử HTML là các thành phần tạo nên tệp định dạng HTML. Các thành phần này chịu trách nhiệm xây dựng các trang web và xác định nội dung của chúng. Trong HTML, một phần tử thường bao gồm thẻ bắt đầu (tên thẻ), thẻ đóng (tên thẻ) và bất kỳ văn bản nào được thêm vào giữa. Một tập hợp các thẻ kết thúc, thẻ bắt đầu, nội dung và thuộc tính là những gì cấu thành một phần tử về mặt kỹ thuật

Một số phần tử HTML là -

Trong một số trường hợp, các phần tử HTML

...

Hơn nữa, chúng tôi có các phương pháp khác nhau để đạt được mục tiêu của mình trong hướng dẫn này

Sử dụng Thuộc tính khả năng hiển thị

Khả năng hiển thị của phần tử có thể được đặt hoặc trả về bằng thuộc tính khả năng hiển thị

Một phần tử có thể được hiển thị hoặc ẩn bởi người tạo bằng cách sử dụng thuộc tính khả năng hiển thị. Nó giống thuộc tính show theo nhiều cách. Sự khác biệt là trong khi khả năng hiển thị. hidden làm cho nội dung của phần tử ẩn đi trong khi vẫn duy trì vị trí và kích thước ban đầu của phần tử, hiển thị. không cái nào che giấu hoàn toàn phần tử

cú pháp

Sau đây là cú pháp để sử dụng thuộc tính khả năng hiển thị -

document.getElementById("div").style.visibility = "visible";

Thí dụ

Trong ví dụ này, chúng ta thấy rằng một đoạn div đã được tạo có chứa văn bản bị ẩn khi nhấp vào nút Ẩn. Văn bản tương tự được hiển thị khi nhấp vào nút Hiển thị. Thuộc tính khả năng hiển thị giúp thay đổi khả năng hiển thị của phần tử HTML. Nó kiểm soát xem phần tử sẽ được hiển thị hay ẩn khỏi khách truy cập

   
      
Click on Hide to remove text & Click on Show to display text
       Hide 
       Show 
      
   

Trong đầu ra ở trên, người dùng có thể thấy rằng khi nhấp vào hiển thị, văn bản sẽ hiển thị trên màn hình của người dùng. Khi nhấp vào nút Ẩn, chúng tôi thấy văn bản đang bị ẩn khỏi khả năng hiển thị của người dùng

Sử dụng Thuộc tính hiển thị

Kiểu hiển thị của một phần tử có thể được đặt hoặc trả về bằng cách sử dụng thuộc tính Kiểu hiển thị trong HTML DOM. So sánh với thuộc tính khả năng hiển thị, hiển thị hoặc ẩn một phần tử, nó tương tự. trong khi khả năng hiển thị. ẩn có nghĩa là chỉ nội dung của phần tử sẽ bị ẩn, phần tử sẽ vẫn ở vị trí và kích thước ban đầu, hiển thị. không có nghĩa là phần tử sẽ bị ẩn hoàn toàn

cú pháp

Sau đây là cú pháp cho thuộc tính hiển thị -

Nó trả về thuộc tính hiển thị -

object.style.display

Nó đặt thuộc tính hiển thị -

object.style.display = value;

Thí dụ

Trong ví dụ này, chúng ta có thể thấy một phần tử div #myDIV đã được tạo. Khi nhấp vào nút Hiển thị, phần tử div này được hiển thị cho người dùng. Khi nhấp vào nút Ẩn, phần tử div này đang bị ẩn khỏi khả năng hiển thị của người dùng. Phần tử hiển thị kiểm soát xem phần tử #myDIV sẽ được hiển thị hay ẩn khỏi khả năng hiển thị của người dùng

   
      

   
   
   
      
Click the "Show" button to display the div element
      
Click the "Hide" button to remove the div element
      Show
      Hide
      
      

         This is my DIV element.
      
      
      
   

Trong kết quả này, chúng ta có thể thấy rằng khi nhấp vào nút Hiển thị, phần tử div sẽ hiển thị và khi nhấp vào nút Ẩn, phần tử div sẽ bị ẩn

Sử dụng thuộc tính ẩn

Một giá trị boolean tạo nên thuộc tính ẩn. Nó chỉ ra rằng một yếu tố không còn quan trọng hoặc không còn phù hợp khi nó hiện diện. Các phần tử có thuộc tính ẩn được xác định sẽ không được trình duyệt hiển thị

Một ứng dụng khác của thuộc tính ẩn là ngăn người dùng xem một phần tử cho đến khi một yêu cầu khác được thỏa mãn (như chọn hộp kiểm, v.v. ). Sau đó, phần tử có thể được hiển thị bằng cách xóa thuộc tính ẩn bằng JavaScript

cú pháp

Dưới đây là cú pháp sử dụng thuộc tính Hidden trên JavaScript –

document.getElementById("div_element").hidden = true;

Thí dụ

Trong ví dụ này, phần tử div chứa một id và một lớp chứa một số văn bản. Khi nhấp vào nút OK, chúng tôi có thể hiển thị văn bản ẩn. Thuộc tính ẩn giúp hiển thị một số văn bản ẩn khi giá trị Boolean là true được cấp cho nó. Khi một giá trị Boolean là false được gán cho nó, nó sẽ ẩn văn bản trước đó

   
   
   
      

         
Using Hidden Property
         
Click on the OK button to Display A message
         OK
      

      

         
Have a great day with your loved ones!
      

      
   

Trong kết quả này, người dùng có thể thấy rằng thông báo đang được hiển thị trên màn hình của người dùng sau khi nhấp vào nút

Làm cách nào để hiển thị văn bản trong HTML từ JavaScript?

Làm cách nào để chuyển đổi nội dung HTML thành văn bản thuần túy trong JavaScript?

Làm cách nào để văn bản xuất hiện trong JavaScript?

Tại sao mã HTML của tôi hiển thị dưới dạng văn bản?