Skip to content
Related Articles

Related Articles

HTML | DOM Pre Object

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 20 Nov, 2021

The DOM Pre Object is used to represent the HTML <pre> element. The pre element is accessed by getElementById().
Properties: 
 

  • width: It is used to set or return the value of the width attribute of the pre element.

Syntax: 
 

document.getElementById("ID");

Where “id” is the ID assigned to the “pre” tag.
Example-1: 
 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>DOM pre Object</title>
</head>
 
<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <h2>DOM pre Object</h2>
         
        <!-- Assigning id to pre tag -->
        <pre id="GFG">
            GeeksforGeeks
            A Computer Science Portal For Geeks
        </pre>
       
        <button onclick="myGeeks()">
          Submit
        </button>
 
        <script>
            function myGeeks() {
               
                //  Accessing pre tag.
                var g = document.getElementById("GFG");
                g.style.color = "blue";
                g.style.fontSize = "15px";
            }
        </script>
  </center>
</body>
 
</html>

Output:
Before Clicking On Button: 
 

After Clicking On Button: 
 

Example-2 : Pre Object can be created by using the document.createElement Method. 
 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>DOM pre Object</title>
</head>
 
<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <h2>DOM pre Object</h2>
        <button onclick="myGeeks()">Submit</button>
 
      <script>
             
          function myGeeks() {
             
              //  Creating 'pre' object.
              var g = document.createElement("PRE");
                
              var f =
                 document.createTextNode("GeeksForGeeks"
                 +"A Computer Science Portal For Geeks.");
                g.appendChild(f);
                document.body.appendChild(g);
            }
        </script>
  </center>
</body>
 
</html>      

Output:
Before Clicking On Button: 
 

After Clicking On Button: 
 

Supported Browsers: The browser supported by DOM Pre Object are listed below: 
 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!