棘手的javascript / jquery / YUI问题，用于控制之间的空白 <input> 元素

Question

This one is a bit complicated, and I will describe my initial problem in detail and where I am at the moment in solving it.

The problem:

My CMS outputs SOME of its HTML for inputs as follows:

<input type="text"><input type="submit">

Now because these input elements are not each on their own lines, there is a lack of white space between the button and the textfield like so:

The preferred way, and the majority of the HTML generated is in fact like this, is to have the HTML on seperate lines:

<input type="text"/>
<input type="submit"/>

so that they render like this:

Now, I cannot alter the HTML (generated by CMS), and I cannot play around with margins and negative margins as they will affect all inputs.

I have found this jQuery solution that seems to work PERFECTLY and fixes the problem:

$('input').after(" ");

It gives consistent white space between all input elements as if they were written in the correct way. BUT, I cannot use jQuery in my solution. We do not work with the jQuery library. I can only use pure javascript, or YUI3.

Now, someone on stackoverflow has helped me to convert the above jQuery into the following YUI3 code:

Y.all('input').insert('&nbsp','after');

and this does work in that it adds the white space where there was none. BUT, the problem with this piece of code is that it also adds an extra whitespace to the correct pieces of HTML which already has whitespace.

Now my question is:

Is there a way to

(1) change

Y.all('input').insert('&nbsp','after');

so that it functions exactly the same way as

$('input').after(" ");

or, alternatively (2) is there perhaps a pure javascript solution that will do what the jQuery solution do,

or perhaps (3) is there a way where I can first remove ALL whitespace between elements, and then add a single white space with the YUI method above?

Thanks, and apologies for the vague question title! :)

EDIT: Just a little extra info.

Here is the problem in action: http://jsfiddle.net/C3sHf/3/

Here you can see how the jQuery code fixes the problem and makes consistent white space: http://jsfiddle.net/C3sHf/2/

and here is the YUI3 solution but it doesnt work as desired: http://jsfiddle.net/9eTrP/1/

Answer 1

CSS should be the proper way of formatting things.

input[type="submit"]{
    margin-left: 0.5em;
}

or

input[type="text"]+input[type="submit"]{
    margin-left: 1em;
}

http://jsfiddle.net/5eG4y/

---

You can create a text-node and insertBefore the submit using plain javascript DOM

var submit = document.querySelector('input[type="submit"]');
var foo = document.createTextNode("Foo");

submit.parentElement.insertBefore(foo, submit);

http://jsfiddle.net/5eG4y/1/