棘手的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/