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 small object
The HTML DOM small object represents the HTML <small> element in the Document Object Model. The <small> element is used to display text in a smaller font size, typically for disclaimers, copyright notices, or fine print. Through the DOM, we can dynamically create, access, and manipulate small elements using JavaScript.
Syntax
Following is the syntax for creating a small object −
var smallElement = document.createElement("SMALL");
Following is the syntax for accessing an existing small element −
var smallElement = document.getElementById("smallId");
Creating a Small Element
The createElement("SMALL") method creates a new small element that can be populated with content and added to the document. This is useful when you need to dynamically add fine print or smaller text to your webpage.
Example
Following example demonstrates how to create a small element and add it to the document −
<!DOCTYPE html>
<html>
<head>
<title>Small Object Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Small Object Example</h1>
<p>Create a small element containing some text by clicking the below button</p>
<button onclick="createSmall()">CREATE</button>
<p>This is normal text</p>
<div id="output"></div>
<script>
function createSmall() {
var smallElement = document.createElement("SMALL");
var textNode = document.createTextNode("This is small text");
smallElement.appendChild(textNode);
document.getElementById("output").appendChild(smallElement);
}
</script>
</body>
</html>
The output shows normal text and when the CREATE button is clicked, small text is added below −
Small Object Example Create a small element containing some text by clicking the below button [CREATE] This is normal text (After clicking CREATE button:) This is small text (displayed in smaller font size)
Accessing Existing Small Elements
You can access existing small elements using getElementById(), getElementsByTagName(), or querySelector() methods to modify their content or styling.
Example
Following example shows how to access and modify an existing small element −
<!DOCTYPE html>
<html>
<head>
<title>Accessing Small Element</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Modify Small Element</h2>
<p>Original text: <small id="mySmall">This is small text</small></p>
<button onclick="modifySmall()">MODIFY</button>
<script>
function modifySmall() {
var smallElement = document.getElementById("mySmall");
smallElement.innerHTML = "Modified small text with <strong>bold</strong> formatting";
smallElement.style.color = "blue";
}
</script>
</body>
</html>
The output demonstrates text modification and styling changes −
Before clicking MODIFY: Original text: This is small text After clicking MODIFY: Original text: Modified small text with bold formatting (in blue color)
Common Properties and Methods
The small object inherits all standard HTML element properties and methods. Some commonly used ones include −
innerHTML− Gets or sets the HTML content inside the small elementtextContent− Gets or sets the text content without HTML markupstyle− Accesses CSS styling propertiesclassName− Gets or sets the CSS class name
Example − Multiple Small Elements
Following example demonstrates creating multiple small elements with different content −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Small Elements</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Website Footer</h2>
<button onclick="addFooterText()">Add Footer Elements</button>
<div id="footer" style="margin-top: 20px; border-top: 1px solid #ccc; padding-top: 10px;"></div>
<script>
function addFooterText() {
var footer = document.getElementById("footer");
footer.innerHTML = ""; // Clear existing content
// Create copyright small element
var copyright = document.createElement("SMALL");
copyright.textContent = "© 2024 TutorialsPoint. All rights reserved.";
// Create terms small element
var terms = document.createElement("SMALL");
terms.innerHTML = " | <a href='#'>Terms of Service</a>";
// Create privacy small element
var privacy = document.createElement("SMALL");
privacy.innerHTML = " | <a href='#'>Privacy Policy</a>";
// Add all elements to footer
footer.appendChild(copyright);
footer.appendChild(terms);
footer.appendChild(privacy);
}
</script>
</body>
</html>
This creates a typical website footer with multiple small text elements −
Website Footer [Add Footer Elements] _________________________________________________ © 2024 TutorialsPoint. All rights reserved. | Terms of Service | Privacy Policy
Conclusion
The HTML DOM small object provides a way to dynamically create and manipulate <small> elements through JavaScript. It is commonly used for adding fine print, disclaimers, or copyright information to webpages. The small element automatically renders text in a smaller font size, making it ideal for secondary information that should be less prominent than regular text.
198 Views
