Knoptekst instellen via JavaScript

Ik stel een knop in via JavaScript, maar de knop laat de tekst niet zien.

Aanbevelingen om dit op te lossen?

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

Antwoord 1, autoriteit 100%

Gebruik textContentin plaats van valueom de knoptekst in te stellen.

Normaal gesproken wordt de waarde attribuutgebruikt om een ​​waarde aan de knop te koppelen wanneer deze wordt ingediend als formuliergegevens.

Houd er rekening mee dat hoewel het mogelijk is om de knoptekst in te stellen met innerHTML, het gebruik van textContextde voorkeur verdient, omdat het beter presteert en het cross-site scripting-aanvallen kan voorkomen. waarde wordt niet geparseerd als 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);

Produceert dit in de DOM:

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

Demo:https://jsfiddle.net/13ucp6ob/

Antwoord 2, autoriteit 15%

De waarde van een knop-element is niet het weergegeven tekst, in tegenstelling tot wat er gebeurt met inputelementen van type knop.

U kunt dit doen:

b.appendChild(document.createTextNode('test value'));

Demonstratie

Antwoord 3, autoriteit 7%

Maak een tekstknooppunt en voeg het toe aan het knopelement:

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

Antwoord 4, autoriteit 5%

Stel de tekst van de knop in door de innerHTML in te stellen

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/