HTML DOM Pre ऑब्जेक्ट

Pre ऑब्जेक्ट क्या है?

HTML DOM Pre ऑब्जेक्ट HTML दस्तावेज़ में <pre> तत्व को दर्शाता है। <pre> तत्व पूर्व-प्रारूपित टेक्स्ट को परिभाषित करता है, जिसमें व्हाइटस्पेस और लाइन ब्रेक संरक्षित रहते हैं। यह आमतौर पर कोड स्निपेट्स, कविता, या ASCII आर्ट प्रदर्शित करने के लिए उपयोग किया जाता है।

Pre ऑब्जेक्ट बनाना

सिंटैक्स

document.createElement("PRE");

उदाहरण

यह उदाहरण दर्शाता है कि कैसे जावास्क्रिप्ट का उपयोग करके डायनामिक रूप से एक <pre> तत्व बनाया जाता है:

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    text-align: center;
    background-color: #fff;
    color: #0197F6;
  }
  h1 { color: #23CE6B; }
  .btn {
    background-color: #fff;
    border: 1.5px dashed #0197F6;
    height: 2rem;
    border-radius: 2px;
    width: 60%;
    margin: 2rem auto;
    display: block;
    color: #0197F6;
    outline: none;
    cursor: pointer;
  }
  pre { font-size: 1.2rem; color: #db133a; }
</style>
</head>
<body>
<h1>DOM Pre ऑब्जेक्ट डेमो</h1>
<button onclick="createPre()" class="btn">एक Pre ऑब्जेक्ट बनाएं</button>
<script>
  function createPre() {
    var preElement = document.createElement("PRE");
    preElement.innerHTML = "नमस्ते! मैं एक प्री HTML तत्व हूँ";
    document.body.appendChild(preElement);
  }
</script>
</body>
</html>

आउटपुट

"एक Pre ऑब्जेक्ट बनाएं" बटन पर क्लिक करने पर, पेज के नीचे एक <pre> तत्व जोड़ा जाता है जिसमें टेक्स्ट होता है।

`<pre>` तत्व की विशेषताएं

व्हाइटस्पेस संरक्षण: स्पेस, टैब, और लाइन ब्रेक ठीक वैसे ही प्रदर्शित होते हैं जैसे वे स्रोत में हैं।
मोनोस्पेस फ़ॉन्ट: डिफ़ॉल्ट रूप से ब्राउज़र मोनोस्पेस फ़ॉन्ट (जैसे Courier, Consolas) का उपयोग करते हैं।
नेस्टिंग: <pre> के अंदर अन्य तत्व (जैसे <code>, <span>) नेस्ट किए जा सकते हैं।

सामान्य उपयोग के मामले

कोड स्निपेट्स और प्रोग्रामिंग उदाहरण प्रदर्शित करना।
कंप्यूटर आउटपुट/लॉग दिखाना।
कविता या ASCII आर्ट जहां लेआउट मायने रखता है।
<code> के साथ संयोजन में सिमेंटिक कोड ब्लॉक के लिए (<pre><code>...</code></pre>)



CSS स्टाइलिंग टिप्स
pre {
  overflow-x: auto;      /* लंबी लाइनों के लिए क्षैतिज स्क्रॉल */
  white-space: pre-wrap; /* लंबी लाइनों को रैप करने के लिए (वैकल्पिक) */
  background: #f4f4f4;   /* कोड ब्लॉक के लिए पृष्ठभूमि */
  padding: 1rem;
  border-radius: 4px;
}