如何使用JavaScript修改AJAX加载的点赞按钮的innerHTML属性？

核心问题 #

1. getElementById 参数错误：你用了类选择器 .btnLike 作为参数，但 getElementById 仅接收纯ID名（不带点），正确参数应该是 "btnLike"。
2. ID重复问题：如果通过AJAX加载多个帖子，每个按钮都用 id="btnLike" 会违反HTML唯一ID的规范，导致后续按钮点击时只能找到第一个匹配的元素。
3. 动态元素事件绑定隐患：内联 onclick 虽然能生效，但对于动态生成的元素，更推荐用jQuery事件委托来绑定，避免重复定义和ID冲突问题。

修正方案 #

方案1：使用jQuery事件委托（推荐）

先修改按钮的HTML，去掉重复的ID，保留类标识：

$('.posted-area').append('\
  <div class="posted-footer">\
    <ul>\
      <li>\
        <button class="btnLike btn-danger"> Like </button>\
      </li>\
      <li>\
        <a href="#"><i class="fa fa-comments-o"></i> </a>\
          <span>15 comments</span>\
      </li>\
    </ul>\
  </div>\
');

然后用事件委托绑定点击事件，确保动态生成的按钮也能响应：

$(document).on('click', '.btnLike', function() {
  $(this).text('Liked!');
});

方案2：修正原函数的错误（仅适用于单个按钮）

如果只需要单个按钮生效，修正 getElementById 的参数：

function btnLikefunction(){
   var btnTextChange = document.getElementById("btnLike");
   btnTextChange.innerHTML= "Liked!";
}

注意：如果有多个帖子，必须给每个按钮分配唯一ID，否则只有第一个按钮能正常工作。

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