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

Question

这有点复杂，我将详细描述我的最初问题以及目前解决该问题的位置。

问题：

我的CMS输出一些HTML作为输入，如下所示：

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

现在，由于这些输入元素不在各自的行上，因此按钮和文本字段之间缺少空白，如下所示：

首选的方法（实际上生成的大多数HTML都是这样）是将HTML放在单独的行上：

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

这样它们就这样渲染：

现在，我无法更改HTML（由CMS生成），并且无法使用边距和负边距，因为它们会影响所有输入。

我发现此jQuery解决方案似乎可以正常工作并解决了问题：

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

它在所有输入元素之间提供一致的空格，就好像它们是以正确的方式编写的一样。 但是，我无法在解决方案中使用jQuery。 我们不使用jQuery库。 我只能使用纯JavaScript或YUI3。

现在，stackoverflow上的某人帮助我将上述jQuery转换为以下YUI3代码：

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

这样做的确起作用，因为它会添加没有空白的空白。 但是，这段代码的问题在于，它还会为正确的HTML部分（已经具有空白）添加一个额外的空白。

现在我的问题是：

有没有办法

（1）变更

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

因此它的功能与

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

或者，或者（2）也许有一个纯javascript解决方案可以完成jQuery解决方案的工作，

也许（3）有没有一种方法，我可以先删除元素之间的所有空格，然后使用上面的YUI方法添加单个空格？

谢谢，对于模糊的问题标题表示歉意！ :)

编辑：只是一些额外的信息。

这是实际的问题： http : //jsfiddle.net/C3sHf/3/

在这里，您可以看到jQuery代码如何解决问题并保持一致的空格： http : //jsfiddle.net/C3sHf/2/

这是YUI3解决方案，但无法按预期工作： http : //jsfiddle.net/9eTrP/1/

Answer 1

CSS应该是格式化事物的正确方法。

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

要么

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

http://jsfiddle.net/5eG4y/

---

您可以使用纯javascript DOM创建文本节点并在提交之前insertBefore

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

submit.parentElement.insertBefore(foo, submit);

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