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

你有什么

<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 2

默认情况下，表单元素的显示属性设置为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);

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

Answer 3

它比他们说的更容易，不需要CSS，请查看HERE

你只需要在表单中放入'count'而不是容器

f.appendChild(count);

而不是

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

将元素附加到div时添加了换行符

3 个答案: