Creé 10, cada uno muestra una identificación en la API. Utilicé querySelectorAll para encontrar todos los bucles y uso for para hacer que el contenido de cada uno contenga una identificación en la API, pero cuando intento codificar, como puede ver, una contendrá las diez identificaciones y no sé cómo hacer es posible
function onResponse(response) { return response.json(); } function data(data) { //create a function to display the element var htmls = data.map(function(post) { return `<li> <h2> ${post.id}</h2> </li>` }); var html = htmls.join(''); const p = document.querySelectorAll('span'); for (let i = 0; i < p.length; i++) { p[i].innerHTML = html; } } fetch('https://jsonplaceholder.typicode.com/users').then(onResponse).then(data); <body> <form> <div> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </form> </body> </html>html ya es el HTML de cada id . Lo está asignando al innerHTML de cada span , lo que hace que haya 9 duplicados.
En su lugar, simplemente asigne al innerHTML span
function onResponse(response) { return response.json(); } function data(data) { //create a function to display the element var htmls = data.map(function(post) { return `<li> <h2> ${post.id}</h2> </li>` }); var html = htmls.join(''); const div = document.querySelector('div'); div.innerHTML = html; } fetch('https://jsonplaceholder.typicode.com/users').then(onResponse).then(data); <body> <form> <div> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </form> </body> </html>