如何使用相同的 JS 代码（带复选框的文本和一些 css）自动创建数百个相同的元素

Question

我需要数百个具有不同 ID 的相同元素，这样它们就可以触发不同的歌曲，而无需实际手动更改它们的 ID。这里是 HTML、JS 和 CSS:https://jsfiddle.net/Tylanmon/by5Lcvw0/4/ 这只是 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`;

Answer 1

记住你是 js 的新手，所以我只展示了 html 创建与 js 部分。如果你知道循环是如何工作的，你可以很容易地使用它

要多次创建相同的标记，您可以按照以下步骤进行操作

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>

如何使用相同的 JS 代码（带复选框的文本和一些 css）自动创建数百个相同的元素

How to use the same JS code (text with a checkbox with some css) to create hundreds of the same element automaticly

html

javascript

css

checkbox