web-dev-qa-db-ja.com

JavaScriptを介してボタンテキストを設定する

JavaScriptを使用してボタンを設定していますが、ボタンにはテキストが表示されません。

修正方法に関する推奨事項はありますか？

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

ありがとう！

javascripthtmlwindows-store-apps
31
dinnouti

基本的に、値の代わりにinnerHTMLを使用します。これは、追加する「ボタン」タイプがその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);

DOMでは次のように見えます：

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

デモ：http://jsfiddle.net/CuXHm/

49
Stevie

button 要素の値は、ボタン型のinput要素に起こることとは反対に、表示されるテキストではありません。

あなたはこれを行うことができます ：

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

デモ

12
Denys Séguret

テキストノードを作成し、ボタン要素に追加します。

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

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/

1
cgatian