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 Bold object
The HTML DOM Bold object represents the HTML <b> element in the Document Object Model. The <b> tag is used to make text appear bold without conveying any extra importance or emphasis. The Bold object provides methods and properties to create, access, and manipulate <b> elements dynamically using JavaScript.
Syntax
Following is the syntax for creating a Bold object −
var boldElement = document.createElement("B");
To access an existing <b> element by its ID −
var boldElement = document.getElementById("boldId");
Properties
The Bold object inherits all properties from the generic HTML Element object, including common properties like innerHTML, textContent, id, className, and style. Since the <b> tag has no specific attributes, it primarily uses these inherited properties for manipulation.
Creating Bold Elements Dynamically
Example − Basic Bold Element Creation
Following example demonstrates how to create a Bold object and add text content to it −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Bold Object</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Creating Bold Text Dynamically</h2>
<p>Click the button to create a bold element with some text:</p>
<button onclick="createBold()">CREATE BOLD TEXT</button>
<div id="output"></div>
<script>
function createBold() {
var boldElement = document.createElement("B");
var textNode = document.createTextNode("This is dynamically created bold text!");
boldElement.appendChild(textNode);
var outputDiv = document.getElementById("output");
outputDiv.appendChild(document.createElement("br"));
outputDiv.appendChild(boldElement);
}
</script>
</body>
</html>
The output shows a button that creates new bold text each time it is clicked −
Creating Bold Text Dynamically Click the button to create a bold element with some text: [CREATE BOLD TEXT] (After clicking): This is dynamically created bold text!
Example − Bold Element with Styling
Following example shows how to create a Bold object and apply additional CSS styling −
<!DOCTYPE html>
<html>
<head>
<title>Styled Bold Element</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Bold Element with Custom Styling</h2>
<button onclick="createStyledBold()">Create Styled Bold</button>
<div id="container"></div>
<script>
function createStyledBold() {
var boldElement = document.createElement("B");
boldElement.textContent = "Stylish Bold Text";
boldElement.style.color = "red";
boldElement.style.fontSize = "18px";
boldElement.style.textDecoration = "underline";
boldElement.id = "styledBold";
var container = document.getElementById("container");
container.appendChild(document.createElement("br"));
container.appendChild(boldElement);
}
</script>
</body>
</html>
This creates a bold element with red color, larger font size, and underline decoration −
Bold Element with Custom Styling [Create Styled Bold] (After clicking): Stylish Bold Text (red, 18px, underlined, bold)
Accessing Existing Bold Elements
Example − Modifying Existing Bold Text
Following example demonstrates how to access and modify existing Bold objects −
<!DOCTYPE html>
<html>
<head>
<title>Modify Bold Elements</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Modifying Bold Elements</h2>
<p>Original text: <b id="myBold">Initial Bold Text</b></p>
<button onclick="changeText()">Change Text</button>
<button onclick="changeColor()">Change Color</button>
<button onclick="addBorder()">Add Border</button>
<script>
function changeText() {
var boldElement = document.getElementById("myBold");
boldElement.textContent = "Modified Bold Text";
}
function changeColor() {
var boldElement = document.getElementById("myBold");
boldElement.style.color = "blue";
}
function addBorder() {
var boldElement = document.getElementById("myBold");
boldElement.style.border = "2px solid green";
boldElement.style.padding = "5px";
}
</script>
</body>
</html>
Each button modifies different properties of the existing bold element −
Modifying Bold Elements Original text: Initial Bold Text [Change Text] [Change Color] [Add Border] (After interactions, the bold text can be modified, colored blue, or given a green border)
Bold vs Strong Elements
While both <b> and <strong> elements make text appear bold, they serve different semantic purposes. The <b> element provides visual bold formatting without semantic meaning, while <strong> indicates important content with semantic significance.
// Creating bold element (visual styling)
var boldElement = document.createElement("B");
// Creating strong element (semantic importance)
var strongElement = document.createElement("STRONG");
Common Use Cases
The HTML DOM Bold object is commonly used in the following scenarios −
Dynamic text formatting − Adding bold styling to text based on user interactions or data conditions.
Content management systems − Creating rich text editors that allow users to apply bold formatting.
Data presentation − Highlighting specific values or labels in dynamically generated content.
Interactive applications − Creating elements that change appearance based on user actions or application state.
Conclusion
The HTML DOM Bold object provides a straightforward way to create and manipulate <b> elements using JavaScript. It supports all standard HTML element properties and methods, making it easy to create dynamic bold text formatting in web applications. Remember to use <b> for visual styling and <strong> when semantic importance is needed.
540 Views
