<html>
<body>
<h1>The Document Object</h1>
    <h2>The documentElement Property</h2>
    <p>The element node is:</p>
    <p id="demo"></p>

    <h2>The getElementById() Method</h2>
    <p id="demo2"></p>

    <h2>The createAttribute() and setAttributeNode() Methods</h2>
    <p>
      Click "Add" to create a class attribute and add it to first h1 element.
    </p>
    <button onclick="myFunction()">Add</button>
</body>
</html>
    .democlass {
      color: red;
    }
      //The documentElement Property
      document.getElementById("demo").innerHTML =
        document.documentElement.nodeName;
      //The getElementById() Method
      document.getElementById("demo2").innerHTML =
        "It is a getElementById Method";
      //The createElement() Method
      // Create element:
      const para = document.createElement("p");
      para.innerText = "This is a paragraph created by createdElement.";
      // Append to body:
      document.body.appendChild(para);
      //The createAttribute() and setAttributeNode() Methods
      function myFunction() {
        // Create a class attribute:
        const att = document.createAttribute("class");
        // Set a value of the class attribute
        att.value = "democlass";
        // Add the class attribute to the first h1;
        document.getElementsByTagName("h1")[0].setAttributeNode(att);
      }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.