Setting button text via JavaScript

html, javascript, windows-store-apps

Solution

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/

Problem

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

Original source

Related problems