javascript - JS元素ID递增

Question

var nub = 2;
var blk="<p class='blk' id=' '></p>";
$("#1").after(blk);
nub++;

怎么让生成出来的p的ID做到blk2 blk3 blk4..... 这样 id=' '里面应该是填写什么

Answer 1

你看一下我的代码https://jsfiddle.net/ksczs3fx/2/

Answer 2

html

<p class="content"></p> 
<span class="btn">点击我</span>

css

html, body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  color: #fff;
}

.content{
  height: 60%;
  background: #00796B;
  overflow: scroll;
}

.blk{
  height: 20px;
  line-height: 20px;
  background-color: #B2DFDB;
}

.btn{
  display: inline-block;
  width: 70px;
  height: 30px;
  border-radius: 4px;
  background: #009688;
  line-height: 30px;
  margin-top: 30px;
  cursor: pointer;
}

js

$(function(){
  var add = (function(start){
    var count = start;
    var iHtml = '';
    
    return function(){
      iHtml = "<p class='blk' id="+'blk' + (count++) + ">"+ count +"</p>" + 'blk'+count;
      
      $('.content').append(iHtml);
    }
  })(1)
  
  $('.btn').click(add);
})

点击预览

Answer 3

var nub = 2;
var blk="<p class='blk' id=' '></p>";
$("#1").after(blk);
$(".blk:last").attr('id', 'blk'+nub);
nub++;

Answer 4

ES6的话可以用模板字符串插入变量，
${variable}

Answer 5

闭包搞定，赋初始值，自增