javascript - 将元素附加到 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，这意味着在创建它们时，它们会跳过段落中的一行。要解决这个问题，一种方法是将表单的显示属性设置为 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);

因为它为文档提供了更好的语义。