JavaScript修改Bootstrap按钮文本不生效，仅图标正常更新如何解决？

问题原因 #

textContent是DOM元素的属性，不是可调用的方法，你当前用括号传参调用的写法不符合语法规则，执行时会抛出类型错误，自然无法修改文本内容。你可以打开浏览器F12控制台，就能看到对应的btn.textContent is not a function报错，这类基础语法问题通过报错信息可以快速定位。

修复代码 #

将两处btn.textContent('xxx')的调用写法改为属性赋值写法即可正常生效：

$('#more-properties').on('hidden.bs.collapse', function () {
  var icon = document.getElementById("icon-more-properties");
  icon.setAttribute('class', 'fas fa-angle-down pr-2');

  var btn = document.getElementById("btn-more-properties");
  btn.textContent = 'More properties';
});
$('#more-properties').on('shown.bs.collapse', function () {
  var icon = document.getElementById("icon-more-properties");
  icon.setAttribute('class', 'fas fa-angle-up pr-2');

  var btn = document.getElementById("btn-more-properties");
  btn.textContent = 'Less properties';
});

如果担心直接修改textContent会覆盖按钮内部的<i>图标标签，也可以单独修改按钮的文本节点：

// 仅修改按钮的最后一个文本节点，保留内部图标标签不受影响
btn.lastChild.textContent = 'More properties';

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