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 Address Object
The HTML DOM Address Object represents the <address> element in HTML. The <address> element is used to define contact information for the author or owner of a document or article. The Address Object provides properties and methods to create, access, and manipulate address elements using JavaScript.
Syntax
To create an Address Object using JavaScript −
document.createElement("address")
To access an existing address element −
document.getElementById("addressId")
Properties
The Address Object supports all standard HTML DOM properties like innerHTML, textContent, style, and event handlers. It inherits properties from the HTMLElement interface.
Creating Address Element
You can create an address element dynamically using the createElement() method and add content using appendChild() or innerHTML.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Address Object</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Company Information</h2>
<p>Click the button to create and display an address element:</p>
<button onclick="createAddress()" style="padding: 8px 16px; font-size: 14px;">Create Address</button>
<div id="result"></div>
<script>
function createAddress() {
var addressElement = document.createElement("address");
var addressText = document.createTextNode("TutorialsPoint Pvt Ltd, Hyderabad, Telangana, India");
addressElement.appendChild(addressText);
addressElement.style.marginTop = "20px";
addressElement.style.fontStyle = "italic";
addressElement.style.border = "1px solid #ccc";
addressElement.style.padding = "10px";
addressElement.style.backgroundColor = "#f9f9f9";
document.getElementById("result").appendChild(addressElement);
}
</script>
</body>
</html>
When you click the "Create Address" button, a new address element is created and styled, then appended to the result div −
Company Information Click the button to create and display an address element: [Create Address] (After clicking) TutorialsPoint Pvt Ltd, Hyderabad, Telangana, India (italicized, bordered, gray background)
Accessing Existing Address Element
You can access and manipulate existing address elements using standard DOM methods like getElementById(), getElementsByTagName(), or querySelector().
Example
<!DOCTYPE html>
<html>
<head>
<title>Access Address Element</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Contact Information</h2>
<address id="contactAddress">
Written by: <a href="mailto:webmaster@example.com">John Doe</a><br>
Visit us at: <br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<button onclick="modifyAddress()" style="padding: 8px 16px; font-size: 14px; margin-top: 15px;">Modify Address</button>
<script>
function modifyAddress() {
var address = document.getElementById("contactAddress");
address.innerHTML = "<strong>Updated Contact:</strong><br>Email: support@tutorialspoint.com<br>Phone: +1-800-123-4567";
address.style.color = "blue";
address.style.backgroundColor = "#e6f3ff";
address.style.padding = "10px";
address.style.border = "2px solid blue";
}
</script>
</body>
</html>
This example shows accessing an existing address element and modifying its content and styling −
Before: Contact information with email link and postal address
After: Updated Contact: (blue text, light blue background, blue border)
Email: support@tutorialspoint.com
Phone: +1-800-123-4567
Using innerHTML Method
The innerHTML property provides a simpler way to set HTML content inside an address element.
Example
<!DOCTYPE html>
<html>
<head>
<title>Address innerHTML Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Address Creation</h2>
<button onclick="addAddress()" style="padding: 8px 16px; font-size: 14px;">Add Company Address</button>
<div id="addressContainer" style="margin-top: 20px;"></div>
<script>
function addAddress() {
var addressElement = document.createElement("address");
addressElement.innerHTML = `
<strong>TutorialsPoint</strong><br>
Email: <a href="mailto:info@tutorialspoint.com">info@tutorialspoint.com</a><br>
Website: <a href="https://www.tutorialspoint.com">www.tutorialspoint.com</a><br>
Address: Hyderabad, India
`;
addressElement.style.backgroundColor = "#f0f8ff";
addressElement.style.padding = "15px";
addressElement.style.border = "1px solid #87ceeb";
addressElement.style.borderRadius = "5px";
document.getElementById("addressContainer").appendChild(addressElement);
}
</script>
</body>
</html>
Using innerHTML allows you to set formatted HTML content more easily than creating individual text nodes −
Dynamic Address Creation [Add Company Address] (After clicking) TutorialsPoint (bold) Email: info@tutorialspoint.com (link) Website: www.tutorialspoint.com (link) Address: Hyderabad, India (All content in a light blue bordered box)
Common Use Cases
The Address Object is commonly used for −
Contact information − Author, editor, or document owner details
Business addresses − Company location and contact details
Article bylines − Writer information in blog posts or articles
Footer information − Website contact details in page footers
Note: The <address> element should not be used for arbitrary addresses (like postal addresses in general), but only for contact information related to the document or article content.
Conclusion
The HTML DOM Address Object provides a programmatic way to create and manipulate <address> elements. You can create address elements using createElement("address"), set their content with innerHTML or text nodes, and access existing address elements using standard DOM selection methods. This makes it easy to dynamically manage contact information on web pages.
242 Views
