HTML | DOM Pre Object

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>       