Por favor, perdone la pregunta confusa de arriba...
Tengo un tablero que obtendrá datos json con ajax cada dos segundos. La solución actual es que borrará el tablero y obtendrá los datos json y los combinará con html, por lo que es algo así:
$.ajax({ .... }).done((res) => { $mainBody.html(''); for (let i = 0; i < res.length; i++){ let ele = '<div class="..."> with adding the json data </div>'; $mainBody.append(ele); } }) Cada ele contendrá alrededor de 55 líneas de código html, y la mayoría de las veces se repetirá más de 20 veces para terminar de agregar todos los elementos.
Y ahora quiero adoptar un enfoque más orientado a objetos para este tablero y considerar usar document.createElement() para todos los elementos, y luego configurar su innerHtml directamente después de cada búsqueda. Pero no estoy tan seguro de la eficiencia y la velocidad, qué solución debo usar.
Lo más efectivo sería usar document.createElement porque además de crear el elemento tienes el control de todas sus propiedades, es decir, no necesitas usar querySelector, solo almacena el elemento creado en una variable y luego agrégalo a el DOM, innerHTML reconstruye todo el DOM mientras que appendChild solo la parte del DOM donde está el elemento principal, además de que no tienes control sobre el elemento o sus elementos secundarios.
const myElement = document.createElement("span"); myElement.textContent = "Hello world!"; myElement.className = "message"; document.body.appendChild(myElement); body { text-align: center; } .message { font-weight: bold; font-size: 32px; color: #222; }"innerHTML += ..." frente a "appendChild(txtNode)"
https://betterprogramming.pub/whats-best-innertext-vs-innerhtml-vs-textcontent-903ebc43a3fc
Lo mejor sería hacer una cadena grande en el ciclo y asignar el innerHTML una vez al final.
let html = res.map(el => `<div class="..."> add json data in here </div>`).join(''); $mainBody.innerHTML = html;El navegador es muy eficiente para analizar HTML, pero solo debe hacerlo una vez. Su método requiere convertir el DOM de nuevo a HTML y volver a analizarlo cada vez que pasa por el bucle.