使用setAttribute设置button name后按钮无文本显示的问题排查

你代码里的问题很明确：把按钮的name属性和显示文本搞混了。

name属性是给表单元素做标识用的——比如按钮在<form>里时，提交表单会把name作为数据键名，但它根本不会变成按钮上的可见文字。要让按钮显示文本，得用专门的文本设置属性：

修正后的代码 #

dropDownButton = document.createElement("button");
// 设置按钮显示的文本，推荐用textContent（纯文本，安全）
dropDownButton.textContent = "BUTTON NAME";
// 如果确实需要name属性可以保留，但这和显示无关
dropDownButton.setAttribute("name", "buttonName");
document.body.appendChild(dropDownButton);

补充说明 #

• 用textContent：只处理纯文本，不会解析HTML，避免XSS风险，适合大多数普通按钮场景
• 用innerHTML：如果需要在按钮里放HTML（比如图标+文字）可以用这个，但要注意内容安全
• 别再把name属性当显示文本用了，它的作用和按钮可见内容完全不沾边

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