JSFiddle - React, Tailwind, and code Playground

by Uday Hiwarale

HTML

<html>

  <head>
    <meta charset="UTF-8">
    <title>DOM</title>

    <!-- assets here -->
  </head>

  <body>
    <div class="container">
      <h3 id="title">Hello World!</h3>

      <ul id="list" class="list red" name="Programming Languages">
        <li class="item">HTML</li>
        <li class="item">CSS</li>
        <li class="item">JavaScript</li>
      </ul>
    </div>
  </body>

</html>

CSS

.red {
  color: red;
}

.blue {
  color: blue;
}

.item {
  font-weight: bold;
}

JavaScript

var ulElement = document.querySelector('#list');

var newElement = document.createElement('li');
newElement.classList.add('item');
newElement.setAttribute('type', 'non-lang');
newElement.innerText = 'JSON';

ulElement.appendChild(newElement);

var newTextNode = document.createTextNode('hello-world');
ulElement.appendChild(newTextNode);