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
Post a Comment