CODEWITHSUNDEEP
javascript
bobbyrne01
bobbyrne01

Reputation: 6735

Newline added when appending elements to a div

The output of code below produces a line of text and then a button below the text.
How can I place the button beside the 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/

Upvotes: 0

Views: 92

Answers (3)

arielnmz
arielnmz

Reputation: 9115

The display attribute of form elements is set to block by default, which means that when they're created they'll skip one line within a paragraph. To solve this, one approach would be to make the form's display atrribute to 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, a more correct approach would be:

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);

Because it gives the document better semantics.

Upvotes: 1

epascarello
epascarello

Reputation: 207501

What you have

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

You would need to append it inside the form, not the container.

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

You should also look at using a label element since that is how you are treating that text.

Upvotes: 1

Luca De Nardi
Luca De Nardi

Reputation: 2321

It's easier than what they say and no CSS needed, look at HERE

You just had to put 'count' inside the form rather than the container

f.appendChild(count);

instead of

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

Upvotes: 0

Related Questions