3

Tengo un li en el cual itero para que me saque todos los elementos que tengan la clase .especial y los agrupe en un div vacío, pero este al hacer el loop, los extrae; no los duplica de la lista ya existente.

Mi código va así:

HTML

let liClassEspecial = document.querySelectorAll("li.especial");
let liArray = Array.from(liClassEspecial);

let container = document.querySelector(".container");
let olElement = document.createElement("ol");
container.appendChild(olElement);

var insert = () => {
  for(i=0; i<=liArray.length; i++){
    try {
       olElement.appendChild(liArray[i]);
    } catch(err) {
       err;
    }
  }
}
insert();
<ol class="lista">
  <li>Item-1</li>
  <li class="especial"> Item-2</li>
  <li>Item-3</li>
  <li class="especial">Item-4</li>
  <li>Item-5</li>
  <li class="especial">Item-6</li>
</ol>
<div class="container"></div>

4
  • Lo he intentado con map() y obtengo el mismo resultado: let nuevoArray = liArray.map(function(liArray){ olElement.appendChild(liArray); });
    – julitree
    Commented el 6 mar. 2020 a las 9:53
  • 1
    Cuando quieras meter código Javascript/HTML en una pregunta, te recomiendo usar un fragmento, el acceso rápido es Ctrl + M. Commented el 6 mar. 2020 a las 10:08
  • 1
    En cualquier caso, bienvenida a SOes. Es una buena primera pregunta (bien escrita y detallada). Te recomiendo completar el recorrido de bienvenida de bievenida para familiarizarte con el sitio y ganar una medalla extra Commented el 6 mar. 2020 a las 10:11
  • 1
    Además puedes visitar Ayuda de edición de Markdown. Pero como dice @PabloLozano para ser la primera pregunta es muy buena pregunta. Commented el 6 mar. 2020 a las 10:15

2 respuestas 2

6

Si quieres duplicarlos, tienes que decirlo expresamente: Lo que hace tu código es moverlos dentro del árbol del DOM, un elemento no puede estar en dos sitios a la vez. Por tanto tienes que clonarlos:

let liClassEspecial = document.querySelectorAll("li.especial");
let liArray = Array.from(liClassEspecial);

let container = document.querySelector(".container");
let olElement = document.createElement("ol");
container.appendChild(olElement);

var insert = () => {
  for(i=0; i<=liArray.length; i++){
    try {
       olElement.appendChild(liArray[i].cloneNode(true));
    } catch(err) {
       err;
    }
  }
}
insert();
<ol class="lista">
  <li>Item-1</li>
  <li class="especial"> Item-2</li>
  <li>Item-3</li>
  <li class="especial">Item-4</li>
  <li>Item-5</li>
  <li class="especial">Item-6</li>
</ol>
<div class="container"></div>

2
  • Siii, quedo perfecto !! .. El código quedo así: var insert = () => { for(i=0; i<=liArray.length; i++){ try { var liClone = liArray[i].cloneNode(true); olElement.appendChild(liClone); } catch(err) { err; } }}
    – julitree
    Commented el 6 mar. 2020 a las 10:12
  • 1
    Si quieres puedes intentar con mi código, te simplifica muchísimo tu solución, lo único es que necesitas jQuery, y jQuery seguramente te lo haga de una manera más óptima, ya que son funciones y a preparadas.
    – chikebox
    Commented el 6 mar. 2020 a las 10:25
0

lo que necesitas es usar la función jquery clone(), para tu código serviría lo siguiente:

//Recuperamos elementos que tengan la lista y los clonamos.
var elementosClonados = $("li.especial").clone();

//Creamos la lista del div .container
$(".container").append("<ol></ol>");
$(".container ol").append(elementosClonados);

La función clone() lo que hace es crear una copia (clon) del elemento que seleccionas, lo que tu estabas haciendo era coger ese elemento, por lo tanto lo estabas moviendo de sitio.

Espero que te sirva

1
  • La pregunta especifica puro Javascript (sin librerías o "vainilla"), no está usando jQuery Commented el 6 mar. 2020 a las 10:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.