Necesito cientos de los mismos elementos con diferentes ID para que puedan activar diferentes canciones, sin tener que cambiar su ID manualmente. aquí para HTML, JS y CSS: https://jsfiddle.net/Tylanmon/by5Lcvw0/4/ Y aquí está solo JS:
var Song_Name = document.createTextNode('La Marseillaise') var div = document.createElement('div') div.setAttribute('class', 'div') var checkbox = document.createElement('input') checkbox.type = 'checkbox' checkbox.name = 'checkNAME' checkbox.id = 'checkID' var label = document.createElement('label') label.id = 'nameID' label.htmlFor = 'checkID' label.appendChild(Song_Name) div.appendChild(label) div.appendChild(checkbox) document.getElementById('songs').appendChild(div) // var length = label.offsetWidth var length2 = checkbox.offsetWidth console.log(length); div.style.width = `${length + (length2 * 2 - 5.9)}px`; div.style.backgroundColor = 'whitte' div.style.borderRadius = '4px' div.style.border = `1px solid black`;teniendo en cuenta que eres nuevo en js, así que acabo de mostrar la creación de html solo con la parte js. si sabe cómo funciona loop, puede usarlo fácilmente con él
para crear el mismo marcado varias veces, puede hacer lo siguiente
const mainDiv = document.querySelector("#songs") function newTextWithCheckBox(songName,id){ let div = document.createElement("div") div.className = "each-song" div.id = "song-" + id div.innerHTML = `${songName} <input type="checkbox" />` return div } // now create as many as you wanted mainDiv.append(newTextWithCheckBox("La Marseillaise",1)) mainDiv.append(newTextWithCheckBox("La Marseillaise",2)) mainDiv.append(newTextWithCheckBox("La Marseillaise",3)) mainDiv.append(newTextWithCheckBox("La Marseillaise",4)) @font-face { font-family: Feather; src: url(/Font/feather.ttf); } .div { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; Background-color: rgb(255, 221, 221); font-size: x-large; } label { color: rgb(0, 0, 0); font-family: 'Feather'; } .each-song { background:pink; padding:15px; border : 1px solid black; width:max-content; } <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="LanguageName_French.css"> </head> <body> <div id="songs"> </div> <script src="LanguageName_French.js"></script> </body> </html>