HTML | DOM Quote Object

Last Updated : 24 Nov, 2021

The Quote Object in HTML DOM is used to represent the HTML <q> element. The quote element can be accessed by using getElementById() method.
Property Value: It contains single attribute value cite. This attribute is used to set or return the value of the cite attribute in a <q> element.
Syntax:

document.getElementById("ID");

Where ID is assigned to the quote tag.
Example 1:

html

<!DOCTYPE html>
<html> 
    <head> 
        <title>
            HTML DOM Quote Object
        </title> 
    </head> 
    
    <body> 
        <h1>GeeksforGeeks</h1>
        
        <h2>DOM Quote Object</h2>
        
        <q id = "GFG" cite = "geeksforgeeks.org">
            GeeksforGeeks
        </q> <br><br>

        <button onclick = "Geeks()">
            Submit
        </button>
        
        <p id = "sudo"></p>

        
        <script>
            function Geeks() {
                var ct = document.getElementById("GFG").cite;
                document.getElementById("sudo").innerHTML = ct;
            }
        </script>
    </body> 
</html>

Output:
Before Click on the Button :

After Click on the Button :

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

html

<!DOCTYPE html>
<html> 
    <head> 
        <title>
            HTML DOM Quote Object
        </title> 
    </head> 
    
    <body> 
        <h1>GeeksForGeeks</h1>
        
        <h2>DOM Quote Object</h2>
        
        <button onclick = "Geeks()">
            Submit
        </button>
    
        <script>
            function Geeks() {
                var quote = document.createElement("Q");
                var txt = document.createTextNode("GeeksForGeeks");
                quote.setAttribute("cite", 
                        "http://www.geeksforgeeks.org, in");
                        
                quote.appendChild(txt);
                document.body.appendChild(quote);
            }
        </script>
    </body> 
</html>

Output:
Before Click on the Button:

After Click on the Button:

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

Google Chrome
Internet Explorer
Firefox
Opera
Safari

M

manaschhabra2

Improve

Article Tags :

Practice Tags :

Misc

Similar Reads

HTML DOM MouseEvent

The MouseEvent Object handles events that occur when the mouse interacts with the HTML document. There are lots of events that interacts with the HTML document. Mouse Events: Mouse events are the action taken by the user on the web page, like clicking, hovering over, etc. Mouse Events Description on

HTML DOM Style fontWeight Property

The fontWeight style property in HTML DOM is used to set or return the thickness of characters in a word that should appear. Syntax: It returns the fontWeight property.object.style.fontWeightIt sets the fontWeight Property.object.style.fontWeight = "normal | lighter | bold | bolder | value | initial

HTML | DOM Pre Object

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â€

HTML | DOM Ol Object

The DOM Ol Object is used to represent the HTML <ol> element . The ol element is accessed by getElementById(). To read more about lists check HTML | Lists. Properties: compact: It is used to set or return whether the size of the list would be displayed normal or not.reversed: It is used to set

HTML | DOM Style letterSpacing Property

The Style letterSpacing property in HTML DOM is used to set the space between the characters. This property allows to set the required space between characters and also used to returns the space between characters. Syntax: It returns the letterSpacing property.object.style.letterSpacingIt used to se

HTML DOM Style minHeight Property

The minHeight property in HTML DOM is used to set or return the minimum height of an element. This property affects only on block-level elements, absolute or fixed position elements. Syntax: It returns the minHeight property.object.style.minHeightIt is used to set the minHeight Property.object.style

HTML | DOM Style counterReset Property

The Style counterReset property in HTML DOM is used to create or reset counters. This property is used with the counterincrement property and the content property.Syntax: It is used to return the counterReset property. object.style.counterResetIt is used to set the counterReset property. object.styl

HTML | DOM Style borderWidth Property

The borderWidth property in HTML DOM is used to set or return the width of the border element. Syntax: It is used to set the border of width. object.style.borderWidth = valueIt returns the border width property. object.style.borderWidth Return Value: It returns the selected border element with the g

HTML | DOM Style justifyContent Property

The style justifyContent property in HTML DOM is used to align the items horizontally when they are not able to use all the available space. It is used to set the position of the element. By default, the items are positioned at the beginning of the container. Syntax: It returns the justifyContent pr

HTML DOM Samp Object

The Samp Object in HTML DOM is used to represent the <samp> element. The <samp> element can be accessed by using the getElementById() method. Syntax: document.getElementById("ID"); Where ID is assigned to the <samp> tag. Example 1: In this example, we will use the DOM Samp Object.