HTML | DOM Ol Object

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>

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

HTML | DOM Ol Object

M

manaschhabra2

Improve

Article Tags :

Practice Tags :

Misc

Similar Reads

HTML DOM Style outlineOffset Property

The Style outlineOffset property in HTML DOM is used to set or return the outline offset and draw it beyond the border edge.Â Outlines do not take space, unlike borders. It returns a string that represents the outline-offset property of an element. Syntax:Â Return the outlineOffset property.object.st

HTML | DOM Style paddingTop Property

The Style paddingTop property is used for setting or returning the top padding of an element. The padding property inserts the user desired space within the border of an element. Syntax : To get the property:object.style.paddingTopTo set the property:object.style.paddingTop = "%|length|initial|inher

HTML DOM Style listStyleType Property

The HTML DOM Style listStyleType property is used to set or return the list-item marker type. It has default values as "disc" for <ul> and "decimal" for <ol> and returns a string that represents the type of the list.Â SyntaxReturns the listStyleType property.object.style.listStyleTypeSet

HTML DOM Option Object

The HTML DOM Option object represents an individual <option> element within a <select>, <datalist>, or <optgroup>. It allows JavaScript to access and manipulate the properties of options, such as setting the text, value, or whether an option is selected.Properties:disabled: T

HTML | DOM Style listStylePosition Property

The DOM Style listStylePosition property sets or returns the position of the list-item marker. Syntax : For set the listStylePosition property:object.style.listStylePosition = valueFor return the listStylePosition property:object.style.listStylePosition Return Value: This return a String that repres

HTML | DOM Style fontFamily Property

The fontFamily property set/return a list of Font-Family names and generic-family names for text in an element. The web browser will implement the first value it recognizes. Syntax: It returns the fontFamily property.object.style.fontFamilyIt sets the fontFamily Property.object.style.fontFamily = "f

HTML | DOM Style flexShrink Property

The Style flexShrink property in HTML DOM is used to set how the specific item can be shrink in relation to the remaining flexible items within the container. Syntax: It is used to return the flexShrink property.object.style.flexShrinkIt is used to set the flexShrink property.object.style.flexShrink

HTML DOM createDocumentFragment() Method

The createDocumentFragment() method in HTML DOM is used to create the document fragment which is useful for changing the content of the document such as deleting, modifying, or adding a new node. This method creates the document fragment, then appends the elements of the document to the document fra

HTML | DOM Location origin Property

The DOM Location origin Property in HTML is used to return the protocol, hostname and port number of a URL. This is a read-only property. Syntax: location.origin Return Value: This method returns a String value representing the protocol, the domain name (or IP address) and port number. The URL's hav

HTML | DOM Style fontSize Property

The fontSize property is used to set or get the font size of characters in a word should appear. Syntax: It returns the fontSize property.object.style.fontSizeIt sets the fontSize Property.object.style.fontSize = "value|initial|inherit" Property Values: ValueDescriptionxx-small x-small small medium