Setting button text via javascript [duplicate]

Question

This question already has an answer here:

• Setting a button's value using javascript 4 answers

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!

Answer 1

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

Answer 2

Basically, use innerHTML instead of value, because the 'button' type you are appending sets it's value in its innerHTML.

JS:

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);

Looks like this in the DOM:

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

Demo: http://jsfiddle.net/CuXHm/

Answer 3

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);

http://jsfiddle.net/jUVpE/

Answer 4

Create a text node and append it to the button element:

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