Setting button text via javascript
Use textContent
instead of value
to set the button text.
Typically the value attribute is used to associate a value with the button when it's submitted as form data.
Note that while it's possible to set the button text with innerHTML
, using textContext
should be preferred because it's more performant and it can prevent cross-site scripting attacks as its value is not parsed as 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);
Produces this in the DOM:
<div id="divWrapper">
<button content="test content" class="btn">test value</button>
</div>
Demo: https://jsfiddle.net/13ucp6ob/
The value of a button element isn't the displayed text, contrary to what happens to input
elements of type button.
You can do this :
b.appendChild(document.createTextNode('test value'));
Demonstration