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 emphasized object
The HTML DOM emphasized object represents the HTML <em> element in the Document Object Model. The <em> element is used to emphasize text content, typically rendering it in italic style to indicate stress or importance. You can create and access emphasized objects using the createElement() and getElementById() methods respectively.
Syntax
Following is the syntax for creating an emphasized object −
var emphasisElement = document.createElement("EM");
Following is the syntax for accessing an existing emphasized object −
var emphasisElement = document.getElementById("elementId");
Properties
The emphasized object inherits all standard HTML element properties such as innerHTML, textContent, style, className, and event handlers. It does not have any specific properties unique to the <em> element.
Creating an Emphasized Element
Following example demonstrates how to create an emphasized element dynamically using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Creating Emphasized Element</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Emphasized Object Example</h2>
<p>Click the button to create an emphasized element:</p>
<button onclick="createEM()">CREATE EMPHASIS</button>
<div id="output"></div>
<script>
function createEM() {
var e = document.createElement("EM");
var txt = document.createTextNode("This text is emphasized!");
e.appendChild(txt);
document.getElementById("output").appendChild(e);
}
</script>
</body>
</html>
The output shows a button that creates emphasized text when clicked −
Emphasized Object Example Click the button to create an emphasized element: [CREATE EMPHASIS] This text is emphasized! (in italic)
Accessing an Existing Emphasized Element
Following example shows how to access and modify an existing emphasized element −
<!DOCTYPE html>
<html>
<head>
<title>Accessing Emphasized Element</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Modify Emphasized Text</h2>
<p>Original text: <em id="myEm">Important information</em></p>
<button onclick="changeText()">Change Text</button>
<button onclick="changeStyle()">Change Style</button>
<script>
function changeText() {
var emElement = document.getElementById("myEm");
emElement.textContent = "Text has been changed!";
}
function changeStyle() {
var emElement = document.getElementById("myEm");
emElement.style.color = "red";
emElement.style.fontSize = "18px";
}
</script>
</body>
</html>
The output demonstrates modifying an existing emphasized element −
Modify Emphasized Text Original text: Important information (in italic) [Change Text] [Change Style] (After clicking: Text becomes "Text has been changed!" in red, larger font)
Multiple Emphasized Elements
Following example creates multiple emphasized elements with different styling −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Emphasized Elements</title>
<style>
.highlight { background-color: yellow; }
.important { color: red; font-weight: bold; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Creating Multiple Emphasized Elements</h2>
<button onclick="createMultiple()">Create Multiple</button>
<div id="container"></div>
<script>
function createMultiple() {
var container = document.getElementById("container");
container.innerHTML = ""; // Clear previous content
// Create first emphasized element
var em1 = document.createElement("EM");
em1.textContent = "Standard emphasis ";
// Create second emphasized element with class
var em2 = document.createElement("EM");
em2.textContent = "Highlighted emphasis ";
em2.className = "highlight";
// Create third emphasized element with inline style
var em3 = document.createElement("EM");
em3.textContent = "Important emphasis";
em3.className = "important";
// Append all elements
container.appendChild(em1);
container.appendChild(em2);
container.appendChild(em3);
}
</script>
</body>
</html>
The output shows three different styled emphasized elements −
Creating Multiple Emphasized Elements [Create Multiple] Standard emphasis Highlighted emphasis Important emphasis (First: italic, Second: italic with yellow background, Third: italic, red, bold)
Common Methods
The emphasized object supports all standard DOM element methods. Here are the most commonly used ones −
appendChild() − Adds a child node to the element
removeChild() − Removes a child node from the element
setAttribute() − Sets an attribute value
getAttribute() − Gets an attribute value
addEventListener() − Attaches an event handler
Conclusion
The HTML DOM emphasized object provides programmatic access to <em> elements, allowing you to create, modify, and style emphasized text dynamically. It inherits all standard DOM element properties and methods, making it easy to integrate emphasized content into your web applications through JavaScript manipulation.
178 Views
