javascript - Newline added when appending elements to a div -


The output of the code below produces one line of text and then produces a button below the text. How do I button next to 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:

The default display of the display attribute of the form elements To form block , which means that when they make them they will leave one line within one paragraph. To solve this, one way would be to display the form inline or inline block :

  on f.style.display = 'inline ';   

here:

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

Update:

The extension of Epcarlo's answer, another correct approach would be:

  var f = document.createElement ( 'Form'); F.setAttribute ('method', 'post'); F.setAttribute ('action', 'test'); // Create your label Vertical Label = document; createElement ('label'); // Set your text var = 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!'); // Submit your text, hidden input and buttons on label labels. AppendChild (count); Label.appendChild (text); Label.appendChild (s); // attach the label in the form f.appendChild (label); // attach the form to the container document .getElementById ('Container'). Attachment (f);   

Because this gives a better semantics to the document.

Comments

Popular posts from this blog

java - ImportError: No module named py4j.java_gateway -

python - Receiving "KeyError" after decoding json result from url -

.net - Creating a new Queue Manager and Queue in Websphere MQ (using C#) -