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

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/

---

您可以创建一个 text-node和 insertBefore使用纯 javascript DOM 提交

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

submit.parentElement.insertBefore(foo, submit);

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