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 Del object
The HTML DOM Del object represents the <del> element in the DOM. The <del> element is used to mark text that has been deleted from a document, typically displayed with a strikethrough style. The Del object provides properties and methods to create, access, and manipulate <del> elements programmatically using JavaScript.
Syntax
Following is the syntax for creating a Del object −
var delElement = document.createElement("DEL");
To access an existing <del> element −
var delElement = document.getElementById("delId");
Properties
The Del object supports the following specific properties −
| Property | Description |
|---|---|
| cite | Sets or returns the value of the cite attribute, which specifies a URL that explains why the text was deleted. |
| dateTime | Sets or returns the value of the datetime attribute, which specifies the date and time when the text was deleted. |
Creating a Del Element
You can create a <del> element dynamically using JavaScript's createElement() method.
Example
Following example demonstrates creating a Del element dynamically −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Del Object - Create</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Del Object Example</h2>
<p>Click the button to create a DEL element with deleted text.</p>
<button onclick="createDel()">CREATE DEL ELEMENT</button>
<div id="output"></div>
<script>
function createDel() {
var delElement = document.createElement("DEL");
var textNode = document.createTextNode("This text has been deleted");
delElement.appendChild(textNode);
document.getElementById("output").appendChild(delElement);
}
</script>
</body>
</html>
The output shows the deleted text with strikethrough formatting −
Del Object Example Click the button to create a DEL element with deleted text. [CREATE DEL ELEMENT] (After clicking: This text has been deleted appears with strikethrough)
Using Del Properties
The cite and dateTime properties provide additional context about the deletion.
Example
Following example shows how to set and retrieve Del object properties −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Del Object - Properties</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Del Object Properties</h2>
<p>Original text: <del id="myDel" cite="http://example.com/reason" datetime="2024-01-15T10:30:00Z">Outdated information</del></p>
<button onclick="showProperties()">Show Properties</button>
<button onclick="updateProperties()">Update Properties</button>
<div id="result"></div>
<script>
function showProperties() {
var delElement = document.getElementById("myDel");
var output = document.getElementById("result");
output.innerHTML = "<p><strong>Cite:</strong> " + delElement.cite +
"<br><strong>DateTime:</strong> " + delElement.dateTime + "</p>";
}
function updateProperties() {
var delElement = document.getElementById("myDel");
delElement.cite = "http://newsite.com/update-reason";
delElement.dateTime = "2024-02-01T14:00:00Z";
showProperties();
}
</script>
</body>
</html>
The output displays the cite and dateTime attribute values −
Del Object Properties Original text: Outdated information (with strikethrough) [Show Properties] [Update Properties] (After clicking Show Properties:) Cite: http://example.com/reason DateTime: 2024-01-15T10:30:00Z
Accessing Existing Del Elements
You can access and manipulate existing <del> elements in the document.
Example
Following example demonstrates accessing and modifying existing Del elements −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Del Object - Access</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Accessing Del Elements</h2>
<p>Document version: <del>Version 1.0</del> <ins>Version 2.0</ins></p>
<p>Price: <del id="oldPrice">$99.99</del> <strong>$79.99</strong></p>
<button onclick="highlightDeleted()">Highlight Deleted Text</button>
<button onclick="countDeleted()">Count Deletions</button>
<div id="info"></div>
<script>
function highlightDeleted() {
var delElements = document.getElementsByTagName("del");
for (var i = 0; i < delElements.length; i++) {
delElements[i].style.backgroundColor = "yellow";
delElements[i].style.color = "red";
}
}
function countDeleted() {
var delElements = document.getElementsByTagName("del");
document.getElementById("info").innerHTML =
"<p>Found " + delElements.length + " deleted text elements.</p>";
}
</script>
</body>
</html>
The output shows how to manipulate multiple Del elements −
Accessing Del Elements Document version: Version 1.0 (strikethrough) Version 2.0 Price: $99.99 (strikethrough) $79.99 [Highlight Deleted Text] [Count Deletions] (After clicking Count Deletions: "Found 2 deleted text elements.")
Conclusion
The HTML DOM Del object provides a programmatic interface to create and manipulate <del> elements. It supports properties like cite and dateTime to provide context about deletions, making it useful for document revision tracking and content management systems. The Del object works seamlessly with other DOM methods for dynamic content manipulation.
193 Views
