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 DT object
The HTML DOM DT object is associated with the HTML <dt> element, which represents a description term in a description list. The DT object allows you to create and manipulate <dt> elements dynamically using JavaScript, enabling interactive generation of definition lists on web pages.
The <dt> element is typically used within a <dl> (description list) container alongside <dd> (description definition) elements to create structured lists of terms and their descriptions.
Syntax
Following is the syntax for creating a DT object −
var dtElement = document.createElement("DT");
Following is the syntax for accessing an existing DT element −
var dtElement = document.getElementById("dtId");
Properties
The DT object inherits all properties from the generic HTMLElement object, including −
innerHTML − Sets or returns the HTML content inside the
<dt>elementtextContent − Sets or returns the text content of the
<dt>elementclassName − Sets or returns the CSS class name of the element
style − Sets or returns the inline CSS styling of the element
Creating a DT Element Dynamically
Following example demonstrates how to create a <dt> element dynamically and add it to a description list −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DT Object</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>DT Object Example</h2>
<p>Create a DT element inside a DL by clicking the button below:</p>
<button onclick="createDT()">CREATE DT ELEMENT</button>
<div id="output"></div>
<script>
function createDT() {
// Create description list container
var descList = document.createElement("DL");
descList.style.border = "1px solid #ccc";
descList.style.padding = "10px";
descList.style.marginTop = "10px";
// Create description term element
var descTerm = document.createElement("DT");
var termText = document.createTextNode("Mango");
descTerm.appendChild(termText);
descTerm.style.fontWeight = "bold";
descTerm.style.color = "#d9534f";
// Create description definition element
var descDef = document.createElement("DD");
var defText = document.createTextNode("Mango is the king of fruits");
descDef.appendChild(defText);
descDef.style.marginLeft = "20px";
descDef.style.color = "#666";
// Append elements to the list
descList.appendChild(descTerm);
descList.appendChild(descDef);
// Append the complete list to the output div
document.getElementById("output").appendChild(descList);
}
</script>
</body>
</html>
The output shows a button that, when clicked, creates a formatted description list −
DT Object Example Create a DT element inside a DL by clicking the button below: [CREATE DT ELEMENT] After clicking: ??????????????????????????????????????? ? Mango (bold, red text) ? ? Mango is the king of fruits ? ???????????????????????????????????????
Adding Multiple DT Elements
Following example shows how to create multiple <dt> elements within a single description list −
<!DOCTYPE html>
<html>
<head>
<title>Multiple DT Elements</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Fruits Description List</h2>
<button onclick="addFruit()">Add Fruit</button>
<dl id="fruitsList" style="border: 1px solid #ddd; padding: 15px; margin-top: 10px;">
</dl>
<script>
var fruits = [
{name: "Apple", desc: "A crunchy and sweet fruit"},
{name: "Orange", desc: "A citrus fruit rich in Vitamin C"},
{name: "Banana", desc: "A yellow fruit high in potassium"},
{name: "Grapes", desc: "Small round fruits that grow in bunches"}
];
var index = 0;
function addFruit() {
if (index < fruits.length) {
var list = document.getElementById("fruitsList");
// Create DT element
var dt = document.createElement("DT");
dt.textContent = fruits[index].name;
dt.style.fontWeight = "bold";
dt.style.color = "#337ab7";
dt.style.marginTop = "10px";
// Create DD element
var dd = document.createElement("DD");
dd.textContent = fruits[index].desc;
dd.style.marginLeft = "25px";
dd.style.color = "#555";
// Append to list
list.appendChild(dt);
list.appendChild(dd);
index++;
} else {
alert("All fruits have been added!");
}
}
</script>
</body>
</html>
Each click adds a new fruit term and definition to the list, demonstrating dynamic DT element creation.
Accessing Existing DT Elements
Following example shows how to access and modify existing <dt> elements −
<!DOCTYPE html>
<html>
<head>
<title>Accessing DT Elements</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Modify Existing DT Elements</h2>
<dl style="border: 1px solid #eee; padding: 15px;">
<dt id="term1">HTML</dt>
<dd>HyperText Markup Language</dd>
<dt id="term2">CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
<button onclick="modifyTerms()">Highlight Terms</button>
<button onclick="resetTerms()">Reset Terms</button>
<script>
function modifyTerms() {
var term1 = document.getElementById("term1");
var term2 = document.getElementById("term2");
term1.style.backgroundColor = "#ffeb3b";
term1.style.padding = "5px";
term2.style.backgroundColor = "#ffeb3b";
term2.style.padding = "5px";
}
function resetTerms() {
var term1 = document.getElementById("term1");
var term2 = document.getElementById("term2");
term1.style.backgroundColor = "";
term1.style.padding = "";
term2.style.backgroundColor = "";
term2.style.padding = "";
}
</script>
</body>
</html>
The example demonstrates accessing DT elements by ID and modifying their styling dynamically.
Common Use Cases
The DT object is commonly used for −
Glossaries − Creating interactive glossaries with term definitions
FAQ sections − Building question and answer sections
Product specifications − Displaying product features and descriptions
Technical documentation − Creating structured lists of technical terms
Conclusion
The HTML DOM DT object provides a powerful way to create and manipulate description terms dynamically. By using document.createElement("DT"), you can build interactive description lists that enhance user experience through dynamic content generation. The DT object works seamlessly with <dl> and <dd> elements to create well-structured, semantic HTML content.
154 Views
