將元素添加到div時添加了換行符

Question

以下代碼的輸出會生成一行文本，然後生成文本下方的按鈕。
如何將按鈕放置在文本旁邊？

var count = document.createTextNode('My text: '); 
document.getElementById('container').appendChild(count); 

var f = document.createElement('form'); 
f.setAttribute('method','POST'); 
f.setAttribute('action','test'); 

var text = document.createElement('input'); 
text.setAttribute('type','hidden'); 
text.setAttribute('name','text'); 
text.value = 'Hey! - hidden value'; 

var s = document.createElement('input'); //input element, Submit button 
s.setAttribute('type','submit'); 
s.setAttribute('value','Hey!'); 

f.appendChild(text); 
f.appendChild(s); 
document.getElementById('container').appendChild(f); 

s.onclick=function(){ 
    f.submit(); 
}; 

的jsfiddle：http://jsfiddle.net/bobbyrne01/hk0annoq/

Answer 1

默認情況下，表單元素的顯示屬性設置爲block，這意味着它們在創建時會跳過段落中的一行。爲了解決這個問題，一個辦法是使窗體的顯示atrribute到inline或inline-block：

f.style.display = 'inline'; 

這裏：

var f = document.createElement('form'); 
f.setAttribute('method','POST'); 
f.setAttribute('action','test'); 
f.style.display = 'inline'; 

你updated fiddle here。

更新：

擴大epascarello的回答，更正確的做法是：

var f = document.createElement('form'); 
f.setAttribute('method','POST'); 
f.setAttribute('action','test'); 

// Create your label 
var label = document.createElement('label'); 

// Set its text 
var count = document.createTextNode('My Text: '); 

var text = document.createElement('input'); 
text.setAttribute('type','hidden'); 
text.setAttribute('name','text'); 
text.value = 'Hey! - hidden value'; 

var s = document.createElement('input'); //input element, Submit button 
s.setAttribute('type','submit'); 
s.setAttribute('value','Hey!'); 

// Append your text, hidden input and submit button to the label 
label.appendChild(count); 
label.appendChild(text); 
label.appendChild(s); 

// Append the label to the form 
f.appendChild(label); 

// Append the form to the container 
document.getElementById('container').appendChild(f); 

因爲它給人的文件更好的語義。

Answer 2

你有什麼

<text node - inline> 
<form - block - causes new line> 

您需要將其追加的形式，而不是容器內。

f.appendChild(count); 
f.appendChild(text); 
f.appendChild(s); 
document.getElementById('container').appendChild(f); 

你也應該看看使用label element因爲這是你將如何處理該文本。

Answer 3

這比他們所說的話更簡單且無需CSS，看HERE

你只是不得不把「計數」的形式內，而不是容器

f.appendChild(count); 

，而不是

document.getElementById('container').appendChild(count);