Duda sobre buenas practicas en javascript

Es buena practicas mezclar codigo html con javascript ?
Es decir, si para mostrar los datos de un json, poner por ejemplo una tabla de esta forma


    const CONTENIDO = document.getElementById('contenido')

datos.results.forEach(e => {
                           showData(e)
}
const showData = data => {
    const elemento = `
    <tr>
    <th scope="row">${data.id}</th>
    <td id="contenidoNombre">${data.name}</td>
    </tr>
    `;
    CONTENIDO.insertAdjacentHTML('beforeend', elemento);
}

 

O se debe de crear cada elemento con las funciones de javascript, es decir con

createElement('tr');  
createElement('td')  
createTextNode(data.id) 
createTextNode(data.name)

Y luego unir cada elemento a su padre con appendChild para mostrar los datos ?