JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div class="template">
  <div fr-if="show">
    IF!!!
    <span fr-val="someVal"></span>
    <span fr-if="hide" fr-val="someVal"></span>
  </div>
  
</div>

CSS

.template{
  display: none;
}

JavaScript

var data = {
	show: true,
  hide: !true,
  someVal: 28*3
};

var template = document.querySelector('.template').cloneNode(true);

function render(template, data){
	var ifs = template.querySelectorAll('[fr-if]');
  		
 	
  template.className = template.className.replace('template','');
  
  for(var i=0; i<ifs.length; i++){
  	  var it = ifs[i],
      		key = it.getAttribute('fr-if'),
          condTrue = !!data[key];
          
      if(!condTrue){
      	it.parentNode.removeChild(it);
      } else {
      	it.removeAttribute('fr-if');
      }
  }
  
  var vals = template.querySelectorAll('[fr-val]');
  
  for(var iv=0; iv<vals.length; iv++){
  	  var it = vals[iv],
      		key = it.getAttribute('fr-val'),
          val = data[key];  
          
      it.removeAttribute('fr-val');
      it.innerHTML = val;
  }
  
  return template
}

var result = render(template, data);

document.body.appendChild(result);