Сделать оглавление только на нативном javascript

Question

Я ищу быстрее на веб-сайте, поэтому лучше использовать javascript, чем jquery.

. У меня есть jquery для создания оглавления на основе элементов h2 и h3 и вставки таблица во втором полугодии. есть ли способ сделать это только на родном javascript?

<script type='text/javascript'>
!function(e){e;if ( $('body.single-post').length ){

        //Plantillas para la tabla
        var tmplwrap ="<div id='tabla-contenido'>\n<div class='titulo'>LO QUE APRENDERÁS</div>\n{contenido}</div>";
        var tmpllink = "<p {clase}><i class='fa fa-caret-right'></i> <a href={link}>{texto}</a></p>\n";
        var cadena  = "";

        //Preparamos el segundo nivel para que tenga una clase
        $('article h2').siblings('h3').addClass('n2');

        //Bucle, recorremos elementos para construir la tabla
        $('article h2, article h3').each(function(index, element){

            clase = $(this).hasClass('n2')?'class="n2"':'';
            texto       = $(this).text();
            enlace_id   = texto.replace(/\d-\s|\?|¿/g,'');
            enlace_id   = enlace_id.replace(/\s+/g, '_');
            $(this).attr('id',enlace_id);

            //Agregamos en una variable cadena
            cadena += tmpllink.replace('{link}',"'#" + enlace_id + "'");
            cadena  = cadena.replace('{texto}',texto);
            cadena  = cadena.replace('{clase}',clase);

        });


        //Ejemplo de link adicional, descomentar

        //$('div.rel_posts h3').attr('id','relacionados');
        //cadena +="<p><i class='fa fa-link'></i> <a href='#relacionados'>- Artículos relacionados</a></p>\n";

        cadena = tmplwrap.replace('{contenido}',cadena);

//Aqui va el código del bucle   
if ( $('article h2').length >= 2 ){
//Aqui va el código del bucle   

        //Finalmente insertamos la cadena antes del primer elemento
        $(cadena).insertBefore( $('.entry-content p:eq(2)').first() );
}
    }}(jQuery);
</script>