Skip to content
Related Articles

Related Articles

Improve Article
HTML | DOM Pre Object
  • Last Updated : 27 Jan, 2019

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:






<!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.




<!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 :