Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Quote Object
The HTML DOM Quote Object represents the <q> element of an HTML document. The Quote object is used to create and manipulate inline quotations programmatically through JavaScript. It provides access to properties specific to the quote element, such as the cite attribute for referencing the source of the quote.
Syntax
Following is the syntax to create a Quote object using JavaScript −
document.createElement("Q");
To access an existing Quote element by ID −
document.getElementById("quoteId");
Properties
The Quote object inherits all standard HTML element properties and methods. The specific property for Quote objects is −
| Property | Description |
|---|---|
| cite | Sets or returns the value of the cite attribute, which specifies a URL that designates the source document or message for the quote. |
Creating a Quote Object
Following example demonstrates how to create a Quote object dynamically using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>DOM Quote Object Demo</title>
<style>
body {
text-align: center;
background-color: #fff;
color: #0197F6;
font-family: Arial, sans-serif;
padding: 20px;
}
h1 {
color: #23CE6B;
}
.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;
font-weight: bold;
padding: 8px;
}
.quote-display {
font-size: 1.2rem;
background-color: #f0f8ff;
color: #333;
padding: 15px;
margin: 20px auto;
border-left: 4px solid #0197F6;
max-width: 80%;
}
</style>
</head>
<body>
<h1>DOM Quote Object Demo</h1>
<button onclick="createQuote()" class="btn">Create a Quote Object</button>
<div id="output"></div>
<script>
function createQuote() {
var qElement = document.createElement("Q");
qElement.innerHTML = "WordPress is software designed for everyone, emphasizing accessibility, performance, security, and ease of use.";
qElement.setAttribute("cite", "https://wordpress.org/about/");
var container = document.createElement("div");
container.className = "quote-display";
container.appendChild(qElement);
document.getElementById("output").appendChild(container);
}
</script>
</body>
</html>
When you click the "Create a Quote Object" button, it creates a new <q> element with the specified text and cite attribute. The browser automatically adds quotation marks around the content.
Accessing Quote Properties
Following example shows how to access and modify the cite property of a Quote object −
<!DOCTYPE html>
<html>
<head>
<title>Quote Object Properties</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Quote Object Properties Example</h2>
<q id="myQuote" cite="https://www.w3.org/standards/">
The World Wide Web Consortium is an international community that develops open standards.
</q>
<br><br>
<button onclick="showCite()" style="padding: 8px 15px; margin: 5px;">Show Cite</button>
<button onclick="changeCite()" style="padding: 8px 15px; margin: 5px;">Change Cite</button>
<p id="result" style="margin-top: 20px; font-weight: bold;"></p>
<script>
function showCite() {
var quote = document.getElementById("myQuote");
var citeValue = quote.cite;
document.getElementById("result").innerHTML = "Current cite value: " + citeValue;
}
function changeCite() {
var quote = document.getElementById("myQuote");
quote.cite = "https://developer.mozilla.org/";
document.getElementById("result").innerHTML = "Cite changed to: " + quote.cite;
}
</script>
</body>
</html>
This example demonstrates how to get and set the cite property of an existing Quote object. The cite attribute provides the URL source reference for the quotation.
Quote vs Blockquote Elements
It's important to understand the difference between <q> and <blockquote> elements −
| Quote (<q>) | Blockquote (<blockquote>) |
|---|---|
| Used for short inline quotations | Used for longer block-level quotations |
| Browser adds quotation marks automatically | No automatic quotation marks |
| Inline element | Block element |
| DOM Object: HTMLQuoteElement | DOM Object: HTMLQuoteElement |
Example − Inline Quote Usage
<!DOCTYPE html>
<html>
<head>
<title>Inline Quote Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; line-height: 1.6;">
<p>
As Albert Einstein once said,
<q cite="https://quoteinvestigator.com/2013/04/06/fish-climb/">
Everybody is a genius. But if you judge a fish by its ability to climb a tree,
it will live its whole life believing that it is stupid.
</q>
</p>
<p>The <q> element automatically adds quotation marks around the text content.</p>
</body>
</html>
The output shows the quote integrated within a paragraph with automatic quotation marks −
As Albert Einstein once said, "Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid." The <q> element automatically adds quotation marks around the text content.
Conclusion
The HTML DOM Quote Object provides a programmatic interface to create and manipulate <q> elements. Its primary property, cite, allows you to specify the source URL for quotations. Use the Quote object for short inline quotations where the browser automatically handles quotation marks, making it ideal for embedding quotes within paragraphs or other text content.
202 Views
