Como fazer para trocar programaticamente via javascript as tags table por tags div no html pegando o conteudo de cada td e colocando dentro de div's?

Tenho um sistema legado, em que gostaria de trocar numa pagina html as tags table por div de forma programatica via javascript pegando o conteudo de cada td e colocando dentro de div's, mas não está funcionando.

Misturei um pouco de javascript, jquery, mas não está indo e ainda não identifiquei o porquê.

Se algum puder me dar uma luz, pois já tentei algumas coisas e não rolou.

o código que tenho no momento é esse abaixo:

document.querySelectorAll('table').forEach(cadaTabela =>{
    let divisaoPai = $("<div>");
    let idDaTabela = cadaTabela.id;

    let paiDaTabela = cadaTabela.parentNode;


    console.log(paiDaTabela);

    let linhas = cadaTabela.children[0].children;

     for(let i=0; i< linhas.length; i++){
         let colunas = linhas[i].children;

         for(let j=0; j< colunas.length; j++){
            let divFilha = $("<div>");
            let conteudo = colunas[j].innerHTML;

            divFilha.append(conteudo);            
            divisaoPai.append(divFilha[0].innerHTML);
            //console.log(divFilha[0].innerHTML);
         }
     }

    cadaTabela.remove();    
    paiDaTabela.append(divisaoPai);     
});    

parte do codigo legado:

<table width="100%" border="0" cellpadding="0" cellspacing="0" id="formCad">
    <tbody>
        <tr>
            <td colspan="3" class="tabCabecalhoExtrato">Dados Pessoais</td>
        </tr>
        <tr>
            <td class="tabLinhaDados" width="97" style="padding-left: 7px;">Nome:</td>
            <td class="tabLinhaDados" colspan="2">
                <label>
                    <html:text property="nome" tabindex="1" styleId="nome" styleClass="textBox x-item-disabled" readonly="true" style="width:380px" />
                    <span class="campoRequerido">*</span>
                </label>
            </td>
        </tr>
        <tr>
            <td class="tabLinhaDados" style="padding-left: 7px;">CPF:</td>
            <td class="tabLinhaDados" colspan="2">
                <span style="float: left">
                    <html:text property="cpf" tabindex="5" styleId="cpf" styleClass="textBox x-item-disabled" readonly="true" style="width:100px" />
                    <span class="campoRequerido">*</span>
                </span>

                <span style="float: right">
                    Data de Nascimento:
                    <html:text property="dia" styleId="dia" tabindex="10" styleClass="textBox x-item-disabled" readonly="true" style="width:20px" />
                    <html:text property="mes" styleId="mes" tabindex="11" styleClass="textBox x-item-disabled" readonly="true" style="width:20px" />
                    <html:text property="ano" styleId="ano" tabindex="12" styleClass="textBox x-item-disabled" readonly="true" style="width:30px" />
                    <span class="campoRequerido">*</span>
                </span>
            </td>
        </tr>
    </tbody>
</table>

Como resultado, removo as table's, mas fica aparecendo "[object Object]" no lugar.

Obrigado.