Soy nuevo en js e intenté mover todos los elementos con cierta clase dentro de un cierto div. Investigué un poco y vi una solución que funciona con id, pero cuando traté de cambiarlo a classNames ya no funcionó. ¿Hay algo más que escribir?
Aquí está mi HTML
<div class="bottom">bottom 1</div> <div class="bottom">bottom 2</div> <div id="top">top</div>y mi guion hasta ahora
document.getElementById('top').appendChild(document.getElementsByClassName('bottom')) console.log(document.getElementById('top').innerHTML)Entendí que appendChild no funcionó porque document.getElementsByClassName('bottom') es una cadena de matriz en lugar de un nodo, pero no tengo ni idea de qué es un nodo, ni cómo cambiar mi código para que funcione.
¡Realmente agradecería cualquier ayuda! Gracias.
Puedes probar esto:
const top = document.getElementById('top'); Array.from(document.getElementsByClassName('bottom')).forEach(bottom => top.appendChild(bottom))const top = document.getElementById('top'); var elements = document.getElementsByClassName("myclass"); [].forEach.call(elements, function(el) { el.appendChild(bottom); });También puede usar esta sintaxis, pero no es compatible con navegadores más antiguos como IE:
document.querySelectorAll('.myclass').forEach(...) const t = document.getElementById('top'); [...document.getElementsByClassName('bottom')].map(el => t.appendChild(el)); <div class="bottom">bottom 1</div> <div class="bottom">bottom 2</div> <div id="top">top</div>