javascript - 通过 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);

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/

Answer 2

按钮元素的值不是显示的文本，这与按钮类型的元素发生的情况相反input。

你可以这样做 ：

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

示范

Answer 3

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

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

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/