HTML DOM Mark Object

Last Updated : 14 Jun, 2023

The Mark Object in HTML DOM is used to represent the HTML <mark> element. The Mark Object is new in HTML 5. The <mark> element can be accessed by using the getElementById() method.

Syntax:

document.getElementById("id")

Where id is assigned to the <mark> tag.

Note: This tag is not supported by Internet Explorer and earlier versions.

Example 1: In this example, we will see the use of DOM Mark Object.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Mark Object
    </title>
</head>
   
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <h2>DOM mark Object</h2>
    <p>
        A <mark id="mark_obj">computer science</mark>
        portal for geeks.
    </p>
    <button onclick="Geeks()">
        Click Here
    </button>
    <script>
        function Geeks() {
            let txt = document.getElementById("mark_obj");
            txt.style.fontSize = "x-large";
        }
    </script>
</body>
</html>

Output:

Example 2: Mark Object can be created by using the document.createElement method.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Mark Object
    </title>
</head>
   
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <h2>DOM mark Object</h2>
    <button onclick="Geeks()">
        Click Here!
    </button>
    <br><br>
    <div>
        A <span id="p"></span>
        portal for geeks.
    </div>
    <script>
        function Geeks() {
            let txt = document.createElement("MARK");
            let t = document.createTextNode("computer science");
            txt.appendChild(t);
            document.getElementById("p").appendChild(txt);
        }
    </script>
</body>
</html>