JSFiddle - React, Tailwind, and code Playground

by domenlightenment

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

CSS

.blue{
    font-weight:bold;
    color:blue;
}

JavaScript

//convert the jQuery below to native DOM
$('ul').append('<li>4</li>').find('li').addClass('blue');


//A solution is provided below, but try one out before looking at the answer
























/*

//add li
document.querySelector('ul').insertAdjacentHTML('beforeend','<li>4</li>');

//select li's add a class to each li
[].forEach.call(document.querySelectorAll('li'),function(elm){
    elm.setAttribute('class','blue');
});

*/