actualmente estoy tratando de reemplazar elementos secundarios con el mismo valor en una matriz
p.ej:
const e = document.createElement("div"); e.className = "e"; e.innerHtml = "test "; const a = [e, e, e]; // test is appearing only once instead of multiple times document.body.replaceChildren(...a);mi codigo es este:
class MockElement { constructor(className, children = []) { this.element = document.createElement("div"); this.className = className; this.children = children; this.element.className = className; console.log(Array(children)) if (children) this.element.replaceChildren(...Array(children)); }; replaceChildren(c) { this.children = c; this.element.replaceChildren(...c); }; }; //const wrapper = document.getElementById("centirdle-boards"); const fill = (c, t) => { // init new array let a = new Array(); // loop through {t} times, adds new copy of {c} to the array each time for (let j = 0; j < t; j++) a.push( c ); return a; }; const h = new MockElement("h"); // only seeing one of them document.body.replaceChildren(...fill(h.element, 5)) actualmente la función de fill funciona bien y según lo previsto
la clase de elemento simulado también funciona bien
Los objetos JavaScript son referencias. Esto significa que solo hay un solo h.element en la memoria de todo su programa, por lo que si le dice al DOM que reemplace los niños con h.element 5 veces, solo lo insertará una vez porque son cinco referencias a un solo elemento. .
Debe crear varios elementos.
Con su ejemplo de código, se vería así:
// Calls `document.createElement` five times total const elements = new Array(5) .fill(null) .map(() => new MockElement("h").element); document.body.replaceChildren(...elements);Consulte este artículo para obtener más información: https://dmitripavlutin.com/value-vs-reference-javascript/