Construir nodos en JavaScript

createElement y un fragmento, para que la página refluya una sola vez.

function renderSteps(steps) {
  const fragment = document.createDocumentFragment();

  for (const step of steps) {
    const row = document.createElement("li");
    row.className = "step";
    row.dataset.idx = String(step.idx);

    const title = document.createElement("span");
    title.textContent = step.title;

    const stars = document.createElement("span");
    stars.textContent = "*".repeat(step.stars);

    row.append(title, " ", stars);
    fragment.append(row);
  }

  const list = document.querySelector("#steps");
  list.replaceChildren(fragment);
  return list.children.length;
}

Cómo funciona

Asigna textContent, no innerHTML, para texto no confiable.
Un DocumentFragment agrupa las inserciones en una sola operación.
append acepta varios nodos o cadenas a la vez.

Palabras clave y builtins usados aquí

String
const
document
for
function
of
return

El intento, en números

Líneas: 22
Caracteres a escribir: 549
Tokens: 137
Ritmo de tres estrellas: 95 tpm

Al ritmo de tres estrellas de 95 tokens por minuto, este intento toma unos 87 segundos.

Escribe este fragmento

Paso 2 de 3 en El DOM; paso 2 de 13 en El navegador.

← Anterior Siguiente →