javascript - 在不更改 HTML 的情况下使用递增的类号创建简单的新父元素

Question

我正在尝试创建一些带有类名的元素，以便在末尾有一个数字，每个新元素递增 1。例如。 <div class='someClass1'></div> , 然后 <div class='someClass2'></div> , <div class='someClass3'></div>等等……

但是，我只能让子元素具有递增的类名，例如<span class='0'>here</span> , <span class='1'>here</span> , <span class='2'>here</span>等，这是通过更改内部 HTML 来完成的。

如何让父“someClass”具有递增的类(class)编号？我试过 newNode.classList.add("someClass + noAdded");但返回语法错误。感谢您的帮助 - 我的代码如下:

var testy = document.getElementById('testy'); // <div id='testy'></div>
var noAdded = 0;

function addToPage() {
        var newNode = document.createElement("div"); // <div></div>
        newNode.classList.add("someClass"); // <div class='someClass'></div>
        newNode.innerHTML = '<span class="' + noAdded + '">here</span>'; // <span class='0'>here</span>
        testy.appendChild(newNode); // <div id='testy'><span class='0'>here</span></div>
        noAdded++;
    }

addToPage();
addToPage();
addToPage();

结果:

<div id="testy">
    <div class="someClass">
        <span class="0">here</span>
    </div>
    <div class="someClass">
        <span class="1">here</span>
    </div>
    <div class="someClass">
        <span class="2">here</span>
    </div>
</div>

Answer 1

将变量 noAdded 的值连接到字符串 someClass。

改变

newNode.classList.add("someClass");

到

newNode.classList.add("someClass"+noAdded);

var testy = document.getElementById('testy'); // <div id='testy'></div>
var noAdded = 0;

function addToPage() {
        var newNode = document.createElement("div"); // <div></div>
        newNode.classList.add("someClass"+noAdded); // <div class='someClass'></div>
        newNode.innerHTML = '<span class="' + noAdded + '">here</span>'; // <span class='0'>here</span>
        testy.appendChild(newNode); // <div id='testy'><span class='0'>here</span></div>
        noAdded++;
    }

addToPage();
addToPage();
addToPage();

.someClass0{color:red;}
.someClass1{color:green;}
.someClass2{color:blue;}

<div id="testy">
</div>