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 Underline Object
The HTML DOM Underline Object represents the <u> element in the Document Object Model. The <u> element is used to display text with an underline, though modern HTML5 recommends using CSS for styling instead of semantic meaning.
The Underline Object provides access to all standard HTML element properties, methods, and events, allowing you to manipulate underlined text dynamically through JavaScript.
Syntax
To create a new <u> element using JavaScript −
var uObject = document.createElement("U");
To access an existing <u> element −
var uObject = document.getElementById("elementId");
Creating a Underline Element
You can create a <u> element dynamically using the document.createElement() method and then append it to the document.
Example
<!DOCTYPE html>
<html>
<head>
<title>Creating Underline Element</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Underline Creation</h2>
<div id="container"></div>
<button onclick="createUnderline()">Create Underlined Text</button>
<script>
function createUnderline() {
var uObject = document.createElement("U");
uObject.textContent = "This text is underlined!";
uObject.style.color = "blue";
document.getElementById("container").appendChild(uObject);
}
</script>
</body>
</html>
Clicking the button creates and displays underlined text dynamically −
Dynamic Underline Creation [Create Underlined Text] After clicking: This text is underlined! (underlined, blue text)
Accessing Existing Underline Element
You can access and manipulate existing <u> elements using methods like getElementById(), getElementsByTagName(), or querySelector().
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Underline Object</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2><u id="warning">Warning:</u> This is a Demo Example</h2>
<button onclick="styleUnderline()">Style Underline</button>
<button onclick="resetStyle()">Reset Style</button>
<script>
var uObject = document.getElementById("warning");
function styleUnderline() {
uObject.style.backgroundColor = '#DC3545';
uObject.style.color = '#FFF';
uObject.style.padding = '5px';
uObject.style.borderRadius = '3px';
}
function resetStyle() {
uObject.style.backgroundColor = '';
uObject.style.color = '';
uObject.style.padding = '';
uObject.style.borderRadius = '';
}
</script>
</body>
</html>
The output shows the underlined warning text with interactive styling −
Warning: This is a Demo Example (Warning is underlined) [Style Underline] [Reset Style] After styling: Warning appears with red background and white text
Properties and Methods
The Underline Object supports all standard HTML element properties and methods. Common ones include −
textContent − Sets or returns the text content of the element
innerHTML − Sets or returns the HTML content inside the element
style − Access to CSS styling properties
className − Sets or returns the CSS class name
addEventListener() − Attaches event handlers
Example − Multiple Underline Elements
<!DOCTYPE html>
<html>
<head>
<title>Multiple Underline Elements</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Text Formatting Examples</h2>
<p>Regular text with <u>underlined portion</u> in the middle.</p>
<p><u class="highlight">Important information</u> should be noted.</p>
<p><u id="dynamic">Click to change this text</u></p>
<button onclick="modifyAll()">Modify All Underlines</button>
<script>
function modifyAll() {
var allUnderlines = document.getElementsByTagName("u");
for (var i = 0; i < allUnderlines.length; i++) {
allUnderlines[i].style.color = "red";
allUnderlines[i].style.textDecoration = "underline wavy";
}
document.getElementById("dynamic").textContent = "Text has been modified!";
}
</script>
</body>
</html>
This example demonstrates manipulating multiple <u> elements at once −
Text Formatting Examples Regular text with underlined portion in the middle. Important information should be noted. Click to change this text [Modify All Underlines] After clicking: All underlined text becomes red with wavy underlines
Event Handling
The Underline Object supports all standard HTML events like onclick, onmouseover, onmouseout, etc.
Example
<!DOCTYPE html>
<html>
<head>
<title>Underline Events</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Interactive Underlined Text</h2>
<p>Hover over this <u id="interactive">underlined text</u> to see effects.</p>
<p id="status">Status: Normal</p>
<script>
var underlineObj = document.getElementById("interactive");
var statusObj = document.getElementById("status");
underlineObj.addEventListener("mouseover", function() {
this.style.backgroundColor = "yellow";
this.style.fontWeight = "bold";
statusObj.textContent = "Status: Mouse over underlined text";
});
underlineObj.addEventListener("mouseout", function() {
this.style.backgroundColor = "";
this.style.fontWeight = "normal";
statusObj.textContent = "Status: Normal";
});
underlineObj.addEventListener("click", function() {
statusObj.textContent = "Status: Underlined text clicked!";
});
</script>
</body>
</html>
The text responds to mouse interactions with visual feedback and status updates −
Interactive Underlined Text Hover over this underlined text to see effects. Status: Normal On hover: Background becomes yellow, text bold, status changes On click: Status shows "Underlined text clicked!"
Modern Usage Considerations
While the <u> element is still valid in HTML5, modern web development practices recommend using CSS for visual styling. The <u> element should be reserved for cases where underlined text has semantic meaning, such as misspelled words or proper names in Chinese text.
For general underlining, use CSS instead −
.underlined {
text-decoration: underline;
}
Conclusion
The HTML DOM Underline Object provides full programmatic access to <u> elements, supporting all standard properties, methods, and events. While useful for dynamic text manipulation, consider using CSS for styling purposes in modern web development. The object is particularly valuable when you need to create or modify underlined content based on user interactions or application logic.
244 Views
