Setting button text via JavaScript
JavascriptHtmlWindows Store-AppsJavascript Problem Overview
I am setting up a button via JavaScript, but the button doesn't show the text.
Any recommendations on how to fix it?
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);
Javascript Solutions
Solution 1 - 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>
Solution 2 - Javascript
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'));
Solution 3 - Javascript
Create a text node and append it to the button element:
var t = document.createTextNode("test content");
b.appendChild(t);
Solution 4 - Javascript
Set the text of the button by setting the 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);