如何使用JavaScript为HTML div添加id属性？点击事件下设置id不生效

实现失效和点击事件本身的触发机制无关，问题完全出在两处代码错误上：

• 回调内this指向错位：内联绑定onclick="divClick()"时，函数内部的this默认指向全局window对象，而非触发点击的.DivButtonDOM节点，后续基于this的所有操作都不会作用到目标元素上。
• jQuery方法语法使用错误：你写的$(this).attr("id") == "Active"是等值比较表达式，双等号仅做值对比，没有赋值效果，哪怕this指向正确，这行代码也不会修改元素的id属性。

方案1：修正内联事件传参逻辑 #

如果保留HTML内联的事件绑定方式，需要手动把当前被点击的DOM元素传入回调函数，再通过jQuery正确完成id赋值：

<!-- 把当前触发事件的元素作为参数传入函数 -->
<div class="DivButton" style="" onclick="divClick(this)"></div>

function divClick(el) {
    // jQuery attr方法的赋值形式为：attr(属性名, 要设置的属性值)
    $(el).attr("id", "Active");
}

方案2：移除内联事件，通过jQuery统一绑定（更推荐） #

去掉HTML标签上的内联onclick属性，通过jQuery选择器给类名为.DivButton的元素绑定点击事件，这种写法下回调函数内部的this会自动指向当前被点击的DOM元素，不存在指向错位的问题：

<div class="DivButton" style=""></div>

$(document).ready(function() {
    $(".DivButton").on("click", function() {
        $(this).attr("id", "Active");
    })
})

方案3：原生JS实现（无需依赖jQuery） #

如果不想引入jQuery，直接通过原生DOMAPI也可以实现相同效果：

document.querySelector(".DivButton").addEventListener("click", function() {
    this.id = "Active";
})

注意：HTML规范要求id属性在页面内全唯一，如果页面上已经存在id为Active的元素，重复设置id会导致DOM选择行为异常，建议根据业务逻辑提前校验id的占用情况。

内容的提问来源于stack exchange，提问作者user14128818