2013-04-30 120 views
13

我正在通過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); 

謝謝!

回答

21

基本上,使用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/

+0

我看到了什麼問題我嘗試innerHTML的一個方法,而不是財產。謝謝你的幫助。 – dinnouti 2013-04-30 16:42:03

5

button元素的值不是顯示的文本,與input元素類型按鈕發生的情況相反。

你可以這樣做:

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

Demonstration

3

創建一個文本節點,並將其附加到按鈕元素:

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

通過設置的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/