React项目中用setAttribute设置按钮文本不显示问题求助

核心错误原因 #

• innerHTML是DOM元素的内置属性，并非HTML标签属性，不能用setAttribute()设置——这个方法仅用于操作HTML标签上显式声明的属性（比如type、class这类）。
• 按钮的value属性是表单提交时携带的数值，和按钮显示的文本无关，普通按钮的显示内容属于元素的文本节点范畴。

正确写法 #

直接给DOM元素的textContent或innerHTML属性赋值即可，优先推荐textContent（更安全，可避免XSS风险）：

var removeBranchBtn = document.createElement('button');
removeBranchBtn.setAttribute('type','button');
// 方法1：设置纯文本
removeBranchBtn.textContent = 'Remove';
// 方法2：若需富文本内容，使用innerHTML
// removeBranchBtn.innerHTML = 'Remove';

额外提醒 #

在React项目中，更建议用JSX语法创建元素，而非原生DOM操作，比如：

const RemoveBranchBtn = <button type="button">Remove</button>;

这种方式更契合React的数据流与组件化思想，也能规避原生DOM操作带来的副作用。

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