javascript - 通过单击事件动态附加具有增量数值的不同类

Question

我有一个span标签和一个button标签

<span class="myspan">1</span>
<button id="add">Add +1</button>
var arr=["myspan1","myspan2","myspan3","myspan4"} 

我想通过单击按钮从该数组中添加带有增量值的新类的更多 span 标记。像这样的输出:

<span class="myspan1">1</span>
<span class="myspan2">2</span>
<span class="myspan3">3</span>
<span class="myspan4">4</span>

我试试` this JsFiddle

但是我无法将类名添加到数组中的新追加标签。

另一个有用的链接，用于将标签附加到数组中的新类 http://jsbin.com/nojipowo/2/edit?html,css,js,output...但是无论如何我都不能带上我想要的输出...在这里输入代码

值增加在此代码段中输入代码

<script>    var i = 0;    function buttonClick()    {i++;     document.getElementById('inc').value = i;    }    </script>    <button onclick="buttonClick();">Click Me</button>    <input type="text" id="inc" value="0"></input>

另一种尝试......任何人都可以帮助..获得期望的输出

var i=6;
var backgrounds = ["myspan1", "myspan2", "myspan4"];
var elements = document.getElementsByClassName("myspan");var len = backgrounds.length;

$("#add").click( function() {
(i < elements.length){


  $(".new-field").append('<span class="myspan">1</span><script');
    var value = parseInt($(".myspan").text(), 10) + 1;
    elements[i].className += ' ' + backgrounds[i%len];
    i++;
    $(".background").text(i);    
    }
});

*/

<span class="myspan">1</span>

<button id="add">Add +1</button>
<div class="new-field">
  
</div>

Answer 1

<script>    var i = 0;    function buttonClick()    {i++;     document.getElementById('inc').value = i;    }    </script>    <button onclick="buttonClick();">Click Me</button>    <input type="text" id="inc" value="0"></input>