Estoy tratando de agregar una lista de usuarios bajo los "participantes". Mi código actual agrega los elementos junto a los participantes del trabajo.
showname.innerHTML = `<h4>participants:</h4>` + '<ul>' + users.map(function (user) { return '<li>' + user + '</li>'; }).join('') + '</ul>';Así que me gusta algo como esto:
Participantes:
-usuario1
-usuario2
-usuario3
pero actualmente es:
participantes: usuario1 usuario2 usuario3
No hay muchos errores en su código a menos que no haya asignado el selector correctamente. Si tiene un div con contenedor de clase, esto es lo que debe hacer sin cambiar su código.
const showname = document.querySelector('.container'); const users = ['Solomon', 'Abebe', 'Sara']; showname.innerHTML = '<h4>participants:</h4>' + '<ul>' + users.map(function (user) { return '<li>' + user + '</li>'; }).join('') + '</ul>';La otra opción es crear elementos html y agregarlos a los existentes.
const containerBox = document.createElement('div'); containerBox.classList.add = 'container-box'; showname.appendChild(containerBox); containerBox.innerHTML = '<h4>participants:</h4>' + '<ul>' + users.map(function (user) { return '<li>' + user + '</li>'; }).join('') + '</ul>';Como dije, no hay mucho que debas cambiar. Espero que esto ayude.
¿Por qué no simplemente agrega la etiqueta <br> al final de cada registro de usuario?
showname.innerHTML = '<h4>participants:</h4><br>' + '<ul>' + users.map(function (user) { return '<li>' + user + '</li>' + '<br>'; }).join('') + '</ul>';En JS puede crear elementos HTMl usando createElement(tagName). Luego puede usar innerText o innerHTMl para agregar texto a html al elemento. Luego, debe agregarlo al elemento principal.
ejemplo de trabajo
const ul = document.querySelector('ul'); const ps = ["p1","p2","p3"]; const h4 = document.createElement('h4'); ps.forEach(p => { const li = document.createElement('li'); li.innerHTML = p; ul.appendChild(li) }) <h4>participants:</h4> <ul></ul>