javascript - 間の空白を制御するためのトリッキーな javascript/jquery/YUI の問題要素

Question

これは少し複雑です。私が最初に抱えた問題と、それを解決しようとしている現在の状況について詳しく説明します。

問題：

私のCMSは、入力用のHTMLの一部を次のように出力します。

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

これらの入力要素はそれぞれ独自の行にあるわけではないため、次のようにボタンとテキストフィールドの間に空白がありません。

問題 - スペースがない

推奨される方法、および生成される HTML の大部分は実際にはこのようなものですが、HTML を別の行に配置することです。

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

次のようにレンダリングします。

このようにする必要があります

現在、(CMS によって生成された) HTML を変更することはできません。また、すべての入力に影響するため、余白と負の余白をいじることもできません。

完全に機能し、問題を解決するこの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) jQuery ソリューションが行うことを実行する純粋な JavaScript ソリューションが存在する可能性があります。

または、おそらく(3)最初に要素間のすべての空白を削除してから、上記の YUI メソッドで空白を 1 つ追加する方法はありますか?

あいまいな質問のタイトルをお詫びします。:)

編集：ちょっとした追加情報。

実際の問題は次のとおりです。 http://jsfiddle.net/C3sHf/3/

ここでは、jQuery コードがどのように問題を修正し、一貫した空白を作成するかを確認できます: http://jsfiddle.net/C3sHf/2/

ここにYUI3ソリューションがありますが、期待どおりに機能しません: http://jsfiddle.net/9eTrP/1/

1 に答える 1