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">
        <li class="item">HTML</li>
        <li class="item">CSS</li>
        <li class="item">JavaScript</li>
      </ul>
    </div>
  </body>

</html>

CSS

.red {
  color: red;
}

.item {
  font-weight: bold;
}

JavaScript

var lastLiElement = document.querySelector('#list > .item:last-child');
var newLiElement = lastLiElement.cloneNode(true);

// change text content
newLiElement.innerText = 'JSON';

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