Transform structure with pure Javascript

<li class="col-md-4">
<figure>
    <a class="list" href="#"><img alt="" src="image.png"></a>
    <div class="color">
        <small>teste</small>
        <span>post</span>
    </div>
 <figcaption>
    <div class="bar">
        <div class="progress"> <div style="width: 10%;" data-transitiongoal="10" role="pro-bar" class="pro-bar" aria-valuenow="20"><span>1080%</span></div> </div>
    </div>
        <div class="legeng">
            <div class="info">
                <h2><a href="">Titulo teste</a></h2>
                <p><img class="author" src="author.png">Nome</p>
            </div>
                <a href="" class="btn-bor readMore">Ver</a>
            </div>
 </figcaption>
</figure>