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 −
<!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>Output
This will produce the following output −
Click on “Create a quote object” button to create a quote object −
