Javascript 如何在JS中动态增加div id

我试图理解如何在JS中动态增加div id

我每次都会添加类似的div，但它们是不同的元素

让我们考虑一下这个快速的例子来澄清我想了解的内容；p>

<div class="test" id="b1">
    One
</div>


<div class="test" id="b2">
    Two 
</div>

<div class="test" id="b3">
    Three
</div>

<div class="test" id="b4">
    Four
</div>

我在同一个DIv中添加了100多个DIv；但我需要对它们进行不同的注释，以便在单击每个div时应用效果

要做到这一点，我需要了解什么

演示：

更新

有些人误解了我的意思，我想做的是生成div和

<div class="test" id="HOW_CAN_I_Make_VARIABLES">
    One <span class="alertmsg">custom message for this button + HOW_CAN_I_Make_VARIABLES</span>
</div>

//方法1
$（'.test'）。单击（函数（）{
警报（'I am'+$（this.text（）.trim（））；
});
//方法2（高级js用法）
对于（var i=1；i您可以按CSS类附加事件，并使用
event.target.id
获取单击元素的id：

$('div.test').click(function(event) {
    alert('I am  button with id: '+event.currentTarget.id);
});

您还可以使用
每个
函数获取所有元素，并更改其属性，如：

$('.test').each(function (index) {
    alert("iterating element "+$(this).attr(id));
}

创建each（）函数，而不是提供id。删除当前id，让函数为您创建：


试试这个：

$('.test').click(function() {
    alert('I am button #' + ($(this).index() + 1));
});


$（函数（）{
var i=0；
$（'#container'）。查找（'div'）。每个（函数（）{
var temp='b'+i；
$（this.attr（'id'，temp）；
++一,；
console.log（$（this.attr（'id'））；
});
});
添加其他人发布的内容-更灵活一些。每个按钮都知道要提醒的消息（基于blex的代码：）：


将数据属性添加到div：

<div class="div-clickable" id="div1" data-id="1"></div>

这个？Blex，回答它。你搞定了。你可以把警报的内容放在div本身。这样你就可以有完全不同的警报消息，并且不需要ID。@Blex你可能应该删除你小提琴中的ID，以明确它们不是必需的。奖励挑战：也生成所有
元素。
事件.target.id
=
this.id
；），您需要在此处引用：
$（this.attr（'id'）
如果用户单击
.test
div.
事件中的某个元素，则此操作无效。target
指向单击的元素。使用
事件更安全。currentTarget
谢谢！这正是我想要的。若要添加新容器，在这种情况下我应该做什么？若要添加新容器，在这种情况下我应该做什么？如中所示？
$('.test').each(function (index) {
    alert("iterating element "+$(this).attr(id));
}

$('.test').each(function (index) {
    var value = index + 1;
    $(this).attr('id', 'b' + value);
});

$('.test').click(function() {
    alert('I am button #' + ($(this).index() + 1));
});

<div id="container">
 <div></div>
 <div></div>
</div>
<script>
    $(function(){
    var i=0;
    $('#container').find('div').each(function(){
        var temp='b'+i;
        $(this).attr('id',temp);
        ++i;
        console.log($(this).attr('id'));
    });
  });
</script>

<div class="test">
    One <span class="alertmsg">custom message for this button 1</span>
</div>


<div class="test">
    Two <span class="alertmsg">custom message for this button 2</span>
</div>

<div class="test">
    Three <span class="alertmsg">custom message for this button 3</span>
</div>

$('.test').click(function() {
alert('alert from button #' + ($(this).index() + 1)+ ': '+$(this).find(".alertmsg").text());
});

.test {
    height:100px;
    width:100px;
    border: 1px solid black;
}

.test > .alertmsg {
    display: none;
}

<div class="div-clickable" id="div1" data-id="1"></div>

$('.div-clickable').click(function(e){

    var divclicked = $(this).attr("data-id");

    alert("I am div" + divclicked);

})