Un código diferente para agregar contenido HTML

Buen día compañeros y profesores, viendo el curso y siguiendo las instrucciones del profesor, veo que para crear la nueva fila de un paciente se necesita demasiado código, hay que crear los elementos html uno por uno, agregarles el valor, agregarlos al tr y luego al form con appenChild y todavía no llegue al próximo video pero falta agregar las clases correspondientes para hacer el cálculo del IMC.

Buscando información al respecto encontré esta forma de hacerlo que me resultó mucho más práctica, comparto mi código a continuación:

btnAgregar.addEventListener('click', (e) => {
    e.preventDefault();

    var form = document.querySelector('form');

    var nombre = form.nombre.value;
    var altura = form.altura.value;
    var peso = form.peso.value;
    var gordura = form.gordura.value;

    var tabla = document.querySelector('#tabla-pacientes');

    var html = `
    <tr class="paciente">
        <td class="info-nombre">${nombre}</td>
        <td class="info-peso">${peso}</td>
        <td class="info-altura">${altura}</td>
        <td class="info-gordura">${gordura}</td>
        <td class="info-imc">0</td>
    </tr>
    `;

    tabla.insertAdjacentHTML('beforeend', html);

    calcularIMC();

    form.reset();
});

Mi pregunta ahora es la siguiente, a nivel de uso en la vida diaria y de optimización está bien hacerlo de la forma que lo hice?

Si bien se que para llegar al mismo resultado hay cientos de formas distintas, no siempre que funcione quiere decir que esté bien hecho.

Dejo los links de donde tomé la información:

reset(): https://developer.mozilla.org/es/docs/Web/API/HTMLFormElement/reset

insertAdjacentHTML(): https://developer.mozilla.org/es/docs/Web/API/Element/insertAdjacentHTML

Plantillas literales ${} : https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Template_literals

Saludos!