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 Pre Object
The HTML DOM Pre Object represents the <pre> element in the Document Object Model (DOM). The <pre> element is used to display preformatted text, where whitespace and line breaks are preserved exactly as they appear in the HTML source.
The Pre Object provides access to all the properties and methods of a standard HTML element, plus specific functionality for handling preformatted text content.
Syntax
To create a new pre element using JavaScript −
document.createElement("PRE");
To access an existing pre element −
document.getElementById("preId");
Creating a Pre Object
You can create a Pre Object dynamically using the document.createElement() method. This method creates a new <pre> element that can be manipulated and added to the DOM.
Example
Following example demonstrates how to create and manipulate a pre object −
<!DOCTYPE html>
<html>
<head>
<title>DOM Pre Object Demo</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background-color: #f9f9f9;
}
h1 {
color: #23CE6B;
}
.btn {
background-color: #0197F6;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin: 10px;
}
.btn:hover {
background-color: #016bb8;
}
pre {
background-color: #f4f4f4;
border: 1px solid #ddd;
padding: 15px;
margin: 10px auto;
border-radius: 5px;
color: #333;
text-align: left;
max-width: 600px;
}
</style>
</head>
<body>
<h1>DOM Pre Object Demo</h1>
<button onclick="createPre()" class="btn">Create Pre Object</button>
<button onclick="createCodePre()" class="btn">Create Code Pre</button>
<button onclick="clearPre()" class="btn">Clear All</button>
<div id="container"></div>
<script>
function createPre() {
var preElement = document.createElement("PRE");
preElement.innerHTML = "This is preformatted text.\nSpaces and line breaks
are preserved exactly as typed.";
document.getElementById("container").appendChild(preElement);
}
function createCodePre() {
var preElement = document.createElement("PRE");
preElement.innerHTML = "function hello() {
console.log('Hello World!');
return true;
}";
preElement.style.backgroundColor = "#272822";
preElement.style.color = "#f8f8f2";
document.getElementById("container").appendChild(preElement);
}
function clearPre() {
document.getElementById("container").innerHTML = "";
}
</script>
</body>
</html>
The output displays buttons that create different types of pre elements. Click "Create Pre Object" to add preformatted text, "Create Code Pre" for syntax-highlighted code, or "Clear All" to remove elements −
DOM Pre Object Demo [Create Pre Object] [Create Code Pre] [Clear All] (Clicking buttons creates pre elements with preserved formatting)
Accessing Pre Object Properties
The Pre Object inherits all standard HTML element properties and can be manipulated like any other DOM element. You can modify its content, styling, and attributes dynamically.
Example
Following example shows how to access and modify pre element properties −
<!DOCTYPE html>
<html>
<head>
<title>Pre Object Properties</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
pre {
border: 1px solid #ccc;
padding: 10px;
background-color: #f9f9f9;
margin: 10px 0;
}
button {
padding: 8px 15px;
margin: 5px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 3px;
}
</style>
</head>
<body>
<h2>Pre Object Properties Example</h2>
<pre id="myPre">Original text content
Line 2 with spaces
Indented line</pre>
<button onclick="changeContent()">Change Content</button>
<button onclick="changeStyle()">Change Style</button>
<button onclick="showProperties()">Show Properties</button>
<div id="output"></div>
<script>
function changeContent() {
var preElement = document.getElementById("myPre");
preElement.innerHTML = "Updated content:
function example() {
return 'Hello';
}";
}
function changeStyle() {
var preElement = document.getElementById("myPre");
preElement.style.backgroundColor = "#272822";
preElement.style.color = "#f8f8f2";
preElement.style.fontFamily = "Courier New, monospace";
}
function showProperties() {
var preElement = document.getElementById("myPre");
var output = document.getElementById("output");
output.innerHTML = "<h3>Pre Element Properties:</h3>" +
"<p><b>Tag Name:</b> " + preElement.tagName + "</p>" +
"<p><b>ID:</b> " + preElement.id + "</p>" +
"<p><b>Text Length:</b> " + preElement.textContent.length + "</p>";
}
</script>
</body>
</html>
The example shows how to dynamically modify pre element content and styling, and access its properties through the DOM −
Pre Object Properties Example Original text content [Change Content] [Change Style] [Show Properties] Line 2 with spaces Indented line (Buttons modify the pre element and display its properties)
Common Use Cases
The Pre Object is commonly used for −
Code display − Showing programming code with proper indentation and formatting
ASCII art − Displaying text-based graphics that require precise spacing
Formatted text − Preserving the original formatting of plain text content
Configuration files − Showing file contents where whitespace matters
Key Properties and Methods
The Pre Object supports all standard HTML element properties and methods, including −
| Property/Method | Description |
|---|---|
innerHTML |
Gets or sets the HTML content inside the pre element |
textContent |
Gets or sets the text content without HTML tags |
style |
Accesses the CSS styling properties of the element |
appendChild() |
Adds a child element to the pre element |
addEventListener() |
Attaches event handlers to the pre element |
Conclusion
The HTML DOM Pre Object provides a JavaScript interface to create and manipulate <pre> elements dynamically. It preserves whitespace and formatting, making it essential for displaying code, ASCII art, and other content where spacing matters. The Pre Object supports all standard DOM element properties and methods for complete programmatic control.
150 Views
