Computer >> Máy Tính >  >> Lập trình >> HTML

Đối tượng trích dẫn khối HTML DOM

Về cơ bản, blockquote HTML DOM đại diện cho phần tử HTML

. Phần tử
không thêm bất kỳ dấu ngoặc kép nào không giống như thẻ . Chúng ta có thể tạo và truy cập các thuộc tính
với sự trợ giúp của đối tượng blockquote.

Cú pháp

Sau đây là cú pháp cho -

Tạo đối tượng blockquote - 

var x = document.createElement("BLOCKQUOTE");

Ví dụ

Hãy để chúng tôi xem một ví dụ về đối tượng blockquote - 

<!DOCTYPE html>
<html>
<body>
<p>Click on the below button to create a blockquote object</p>
<button onclick="createBloc()">CREATE</button>
<script>
   function createBloc() {
      var x = document.createElement("BLOCKQUOTE");
      var t = document.createTextNode("This is a random block quote.This is some sample text.");
      x.setAttribute("cite", "https://www.examplesite.com");
      x.setAttribute("id", "myQuote");
      x.appendChild(t);
      document.body.appendChild(x);
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Đối tượng trích dẫn khối HTML DOM

Khi nhấp vào TẠO -

Đối tượng trích dẫn khối HTML DOM

Trong ví dụ trên -

Đầu tiên, chúng ta đã tạo một nút CREATE để gọi hàm createBloc (). 

<button onclick="createBloc()">CREATE</button>

Hàm createBloc () sử dụng phương thức createElement () của đối tượng tài liệu để tạo phần tử

. Sau đó, sử dụng phương thức createTextNode () của đối tượng tài liệu, chúng tôi đã tạo một nút văn bản với một số văn bản bên trong nó. Sử dụng phương thức setAttribute (), chúng tôi thêm một số thuộc tính như cite và id vào phần tử
đã tạo ở trên. Sau đó, phần tử cuối cùng được thêm vào dưới dạng phần tử con vào phần thân tài liệu bằng phương thức appendChild () của nó. 

function createBloc() {
   var x = document.createElement("BLOCKQUOTE");
   var t = document.createTextNode("This is a random block quote.This is some sample text.");
   x.setAttribute("cite", "https://www.examplesite.com");
   x.setAttribute("id", "myQuote");
   x.appendChild(t);
   document.body.appendChild(x);
}