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 cite object
The HTML DOM cite object is associated with the HTML <cite> element. The <cite> element is used to reference creative works like books, movies, paintings, songs, or research papers. When rendered, browsers typically display cite content in italics to distinguish it from regular text.
Syntax
Following is the syntax for creating a cite object using JavaScript −
var citeElement = document.createElement("CITE");
Following is the syntax for the HTML <cite> element −
<cite>Title of creative work</cite>
Properties and Methods
The cite object inherits all standard HTML DOM element properties and methods. Some commonly used properties include −
innerHTML− Gets or sets the HTML content inside the cite elementtextContent− Gets or sets the text content inside the cite elementstyle− Gets or sets the inline CSS stylingclassName− Gets or sets the CSS class name
Creating a Cite Element
Following example demonstrates how to create a cite element dynamically using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Cite Object</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Creating a Cite Element</h2>
<p>Click the button to create a citation for "The Starry Night" painting.</p>
<button onclick="createCite()">CREATE CITATION</button>
<div id="output" style="margin-top: 20px;"></div>
<script>
function createCite() {
var cite = document.createElement("CITE");
cite.textContent = "The Starry Night by Vincent van Gogh";
cite.style.fontSize = "18px";
cite.style.color = "#2c5aa0";
var paragraph = document.createElement("p");
paragraph.innerHTML = "Famous painting: ";
paragraph.appendChild(cite);
document.getElementById("output").appendChild(paragraph);
}
</script>
</body>
</html>
The output shows the citation text in italics (browser default styling) with custom blue color −
Creating a Cite Element Click the button to create a citation for "The Starry Night" painting. [CREATE CITATION] After clicking: Famous painting: The Starry Night by Vincent van Gogh (in blue italics)
Accessing Existing Cite Elements
You can access existing cite elements in the DOM using various selection methods −
Example − Accessing by ID
<!DOCTYPE html>
<html>
<head>
<title>Accessing Cite Elements</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Literature References</h2>
<p>One of Shakespeare's famous tragedies is <cite id="book1">Hamlet</cite>.</p>
<p>Another classic novel is <cite id="book2">Pride and Prejudice</cite> by Jane Austen.</p>
<button onclick="highlightCitations()">Highlight Citations</button>
<script>
function highlightCitations() {
var cite1 = document.getElementById("book1");
var cite2 = document.getElementById("book2");
cite1.style.backgroundColor = "#ffff99";
cite1.style.fontWeight = "bold";
cite2.style.backgroundColor = "#99ffcc";
cite2.style.fontWeight = "bold";
}
</script>
</body>
</html>
Clicking the button applies highlighting styles to both citation elements −
Literature References One of Shakespeare's famous tragedies is Hamlet. Another classic novel is Pride and Prejudice by Jane Austen. [Highlight Citations] After clicking, citations appear with colored backgrounds and bold text.
Modifying Cite Content
Following example shows how to modify the content of cite elements dynamically −
Example − Updating Citation Text
<!DOCTYPE html>
<html>
<head>
<title>Modifying Cite Elements</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Movie Citation</h2>
<p>My favorite movie is <cite id="movie">The Shawshank Redemption</cite>.</p>
<button onclick="changeMovie()">Change Movie</button>
<button onclick="addYear()">Add Year</button>
<script>
function changeMovie() {
var movieCite = document.getElementById("movie");
movieCite.textContent = "Inception";
}
function addYear() {
var movieCite = document.getElementById("movie");
var currentText = movieCite.textContent;
if (currentText === "Inception") {
movieCite.innerHTML = currentText + " <span style='color: #666;'>(2010)</span>";
} else {
movieCite.innerHTML = currentText + " <span style='color: #666;'>(1994)</span>";
}
}
</script>
</body>
</html>
The buttons allow you to change the movie title and add the release year in gray text −
Movie Citation My favorite movie is The Shawshank Redemption. [Change Movie] [Add Year] After "Change Movie": My favorite movie is Inception. After "Add Year": My favorite movie is Inception (2010).
Common Use Cases
The cite element is commonly used for −
Academic citations − Referencing research papers, journals, and books
Media references − Movies, TV shows, songs, and albums
Artwork citations − Paintings, sculptures, and other creative works
Web content − Websites, articles, and blog posts
Styling Cite Elements
By default, browsers render <cite> elements in italics. You can override this with CSS styling −
Example − Custom Cite Styling
<!DOCTYPE html>
<html>
<head>
<title>Styling Cite Elements</title>
<style>
.book-cite {
font-style: normal;
font-weight: bold;
color: #d2691e;
text-decoration: underline;
}
.movie-cite {
font-style: italic;
background-color: #f0f8ff;
padding: 2px 6px;
border-radius: 3px;
border: 1px solid #87ceeb;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Styled Citations</h2>
<p>I recently read <cite class="book-cite">To Kill a Mockingbird</cite> by Harper Lee.</p>
<p>Last night I watched <cite class="movie-cite">The Godfather</cite> again.</p>
</body>
</html>
The citations display with different custom styles applied −
Styled Citations I recently read To Kill a Mockingbird by Harper Lee. (bold, orange, underlined) Last night I watched The Godfather again. (italics, light blue background)
Conclusion
The HTML DOM cite object provides a semantic way to reference creative works in web content. You can create cite elements dynamically with JavaScript, access them using DOM selection methods, and style them with CSS. The cite element helps maintain proper document structure and improves accessibility by clearly marking references to external works.
173 Views
