HTML DOM Quote Object

HTML Web Development Front End Technology

The HTML DOM Quote Object represent the <q> element of an HTML document.

Let us create q object −

Syntax

Following is the syntax −

document.createElement(“Q”);

Properties

Following are the properties of quote object −

Property	Explanation
cite	It returns and alter the value of the cite attribute of a quote element in an HTML document.

Example

Let us see an example of HTML DOM quote object −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
      background-color:#fff;
      color:#0197F6;
   }
   h1{
      color:#23CE6B;
   }
   .drop-down{
      width:35%;
      border:2px solid #fff;
      font-weight:bold;
      padding:8px;
   }
   .btn{
      background-color:#fff;
      border:1.5px dashed #0197F6;
      height:2rem;
      border-radius:2px;
      width:60%;
      margin:2rem auto;
      display:block;
      color:#0197F6;
      outline:none;
      cursor:pointer;
   }
   p{
      font-size:1.2rem;
      background-color:#db133a;
      color:#fff;
      padding:8px;
   }
</style>
</head>
<body>
<h1>DOM quote Object Demo</h1>
<button onclick="createQuote()" class="btn">Create a quote object</button>
<script>
   function createQuote() {
      var qElement = document.createElement("Q");
      qElement.innerHTML="WordPress is software designed for everyone, emphasizing accessibility,
      performance, security, and ease of use. We believe great software should work with minimum set
      up, so you can focus on sharing your story, product, or services freely. ";
      qElement.setAttribute("cite","https://wordpress.org/about/");
      document.body.appendChild(qElement);
   }
</script>
</body>
</html>