javascript - Newline added when appending elements to a div -

javascript - Newline added when appending elements to a div -

the output of code below produces line of text , button below text. how can place button beside text?

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/

the display attribute of form elements set block default, means when they're created they'll skip 1 line within paragraph. solve this, 1 approach create form's display atrribute inline or inline-block:

f.style.display = 'inline';

here:

var f = document.createelement('form'); f.setattribute('method','post'); f.setattribute('action','test'); f.style.display = 'inline';

your updated fiddle here.

update:

expanding epascarello's answer, more right approach be:

var f = document.createelement('form'); f.setattribute('method','post'); f.setattribute('action','test'); // create label var label = document.createelement('label'); // set 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 text, hidden input , submit button label label.appendchild(count); label.appendchild(text); label.appendchild(s); // append label form f.appendchild(label); // append form container document.getelementbyid('container').appendchild(f);

because gives document improve semantics.

javascript