I am setting up a button via javascript, but the button shows not the text.
Any recommendation 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);
Thanks!
This question is related to
javascript
html
windows-store-apps
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>
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);
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'));
Create a text node and append it to the button element:
var t = document.createTextNode("test content");
b.appendChild(t);
Source: Stackoverflow.com