JSFiddle - React, Tailwind, and code Playground

HTML

<p><span id="test">blablabla</span><span>bleble</span></p>
<button id="button_1">test</button>

CSS

/* css/test.css */
.blue {
    opacity:0.0;
}
.transition {
   opacity: 1.0;
  -webkit-transition: all 2s linear;
     -moz-transition: all 2s linear;
      -ms-transition: all 2s linear;
       -o-transition: all 2s linear;
          transition: all 2s linear;
}

JavaScript

// crear elemento del tirĂłn
Document.prototype.create = function( tag, text ) {
    var elem = document.createElement( tag );
    if( typeof text == 'string' ) {
        elem.appendChild( document.createTextNode( text ) );
    } else if( text instanceof Node ) {
        elem.appendChild( text );
    } else {
        elem = null;
    }
    return elem;
}
 
// inserta node como el hijo pos-esimo
Node.prototype.insert = function ( node, pos ) {
    var nodes = this.childNodes;
    var n = nodes.length;
    if( pos < n ) {
        this.insertBefore( node, nodes[pos] );
    } else if( pos == n ) {
        this.appendChild( node );
    } else {
        return null;
    }
    return node;
}
 
window.onload = function() {
    document.getElementById( 'button_1' ).onclick = function() {
        // crear elemento span invisible
        var span = document.create( 'span', 'hola' );
        span.className = "blue";
        // insertar elemento como segundo hijo de p
        var section = this.parentNode.parentNode;
        elem = section.getElementsByTagName('p')[0];
        var inserted = elem.insert( span, 1 );    
        setTimeout(function(){ span.className += ' transition'; },1);
    }
}