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 textContent
in plaats van value
om 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 textContext
de 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 input
elementen van type knop.
U kunt dit doen:
b.appendChild(document.createTextNode('test value'));
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);