通过JavaScript设置按钮文本

Question

我正在通过 JavaScript 设置一个按钮，但该按钮没有显示文本。

有什么建议可以修复它吗？

var b = document.createElement('button');
b.setAttribute('content', 'test content');
b.setAttribute('class', 'btn');
b.value = 'test value';

var wrapper = document.getElementById(divWrapper);
wrapper.appendChild(b);

- dinnouti

Answer 1

使用textContent而不是value来设置按钮文本。

通常，当提交表单数据时，使用value属性将一个值与按钮关联起来。

请注意，虽然可以使用innerHTML设置按钮文本，但最好使用textContext，因为它更高效，并且可以防止跨站脚本攻击，因为其值不会解析为HTML。

JS:

var b = document.createElement('button');
b.setAttribute('content', 'test content');
b.setAttribute('class', 'btn');  
b.textContent = 'test value';

var wrapper = document.getElementById("divWrapper");
wrapper.appendChild(b);

在DOM中产生以下结果：

<div id="divWrapper">
    <button content="test content" class="btn">test value</button>
</div>

演示： https://jsfiddle.net/13ucp6ob/

- Stevie

---

我看到了问题所在，我把 innerHtml 当作方法而不是属性来尝试了。感谢您的帮助。 - dinnouti

根据MDN网站的说明，插入纯文本时推荐使用textContent，因为innerHTML存在安全风险并会对内容进行不必要的HTML解析。 - Rosberg Linhares

Answer 2

与 type 为 button 的 input 元素不同，button 元素的值并非显示的文本。

你可以这样做：

 b.appendChild(document.createTextNode('test value'));

演示

- Denys Séguret

Answer 3

创建一个文本节点并将其附加到按钮元素：

var t = document.createTextNode("test content");
b.appendChild(t);

- Rick Viscomi

Answer 4

通过设置innerHTML来设置按钮的文本

var b = document.createElement('button');
b.setAttribute('content', 'test content');
b.setAttribute('class', 'btn');
b.innerHTML = 'test value';

var wrapper = document.getElementById('divWrapper');
wrapper.appendChild(b);

http://jsfiddle.net/jUVpE/

- cgatian