Tengo este código y quiero agregar la variable "ul" a los elementos que tienen la clase "myselectItems".
mi problema esta aqui
selectedElement[i].appendChild(ul);código HTML
<div class="myselectItems"></div>codigo javascript
$(document).ready(function () { let items = [ 'fab fa-500px', 'fab fa-accessible-icon', 'fab fa-accusoft', 'fas fa-address-book', ], ul = document.createElement('select'); ul.setAttribute("id", "myselect"); ul.setAttribute("name", "myselect"); ul.setAttribute("class", "myselect"); items.forEach(item => { let li = document.createElement('option'); ul.appendChild(li); li.innerHTML += item; }); const selectedElement = document.querySelectorAll('.myselectItems'); for (var i = 0; i < selectedElement.length; i++) { selectedElement[i].appendChild(ul); } });El problema es que está agregando el mismo elemento de select cada vez, por lo que esa instancia única se mueve entre elementos.
Para solucionar esto, puede usar cloneNode() antes de agregar para crear una nueva instancia de select para cada div .
selectedElement[i].appendChild(ul.cloneNode(true)); También tenga en cuenta que debe eliminar el atributo de id que configuró en la select , de lo contrario, se duplicará, lo que no es válido. la id debe ser única.
$(document).ready(function() { let items = [ 'fab fa-500px', 'fab fa-accessible-icon', 'fab fa-accusoft', 'fas fa-address-book', ]; var ul = document.createElement('select'); ul.setAttribute("name", "myselect"); ul.setAttribute("class", "myselect"); items.forEach(item => { let li = document.createElement('option'); ul.appendChild(li); li.innerHTML += item; }); const selectedElement = document.querySelectorAll('.myselectItems'); for (var i = 0; i < selectedElement.length; i++) { selectedElement[i].appendChild(ul.cloneNode(true)); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="myselectItems"></div> <div class="myselectItems"></div> <div class="myselectItems"></div>También tenga en cuenta que puede simplificar el código:
jQuery($ => { let items = ['fab fa-500px', 'fab fa-accessible-icon', 'fab fa-accusoft', 'fas fa-address-book']; let selectHtml = `<select name="myselect" class="myselect">${items.map(t => `<option>${t}</option>`)}</select>`; $('.myselectItems').append(selectHtml); // jQuery version //document.querySelectorAll('.myselectItems').forEach(el => el.innerHTML = selectHtml); // plain JS version }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="myselectItems"></div> <div class="myselectItems"></div> <div class="myselectItems"></div>