jquery - jQueryとスペースを追加せずに追加

Question

私はコードを持っています：

<div class="message">
    <span>Menu 1</span><span>Menu 2</span>
</div>

注：スパンタグの間にスペースはありません。私が使用する場合：

$('.message').append('<span>Menu 3</span>');

追加は、行にスペースを追加します。スペースを追加せずにタグを付ける他の方法はありますか？

jqueryが次のようなコードを生成する必要があります：

<div class="message">
    <span>Menu 1</span><span>Menu 2</span><span>Menu 3</span>
</div>

ありがとうございました。

Answer 1

これで問題が修正されます。

$('.message span:last-child').after('<span>Menu 3</span>');​

jQueryは、改行の後に新しいアイテムを追加していました。を使用span:last-childすると最後のメニュー項目が選択され、を使用するとその.after()直後に新しい項目が追加されます。

.message現在空の場合、これは機能しないことに注意してください。これを確認し、その場合は現在のコードを使用して最初の要素を追加する必要があります。

ここで結果を参照してください：http：//jsfiddle.net/ZbSCU/

Answer 2

最初のhtmlから空白ノードを削除できます。

$('.message').contents().each(function() {
    if (this.nodeType === 3 && !$.trim(this.nodeValue)) {
        $(this).remove();
    }
});​

$('.message').append('<span>Menu 3</span>');

さて、あなた自身が明示的に空白を動的に追加しない限り、何もないはずです。

http://jsfiddle.net/ktEMx/5/

この処理後のhtml表現は次のとおりです。

<div class="message"><span>Menu 1</span><span>Menu 2</span><span>Menu 3</span></div>

Answer 3

スペースを挿入するのはjQueryではないと思います。HTMLには2番目のスパンの後に改行が含まれているので、それはDOMの一部であり、jQueryはその後に要素を追加していると思います。

この代替手段を試すことができます：

var current = $('.message').html().replace(/\r|\n/gm, "");
$('.message').html(current + '<span>Menu 3</span>');

Answer 4

さて、私は自分の投稿をもう少しよく調べました。それはjsFiddleフレームに入力されたテキストによって異なります。タブはスペースに置き換えられるため、このコードはjsFiddleで機能します。サブストリングのどのインデックスがスペースを削除するか試してください。http://jsfiddle.net/uPm2D/3/

var content = $('.message').html();
content = content.substring(5, content.length-1);
console.log("|"+content+"|") # this is just to test
content = content + "<span>Menu 3</span>"
console.log("|"+content+"|") # this is just to test
$('.message').html(content);​

Answer 5

このhttp://jsfiddle.net/uPm2D/によると、 あなたが述べていることは正しくありません。詳細を教えていただけますか？発生する可能性があるのは、ブラウザがコードを次のように解釈することです。

<div class="message">
  <span>Menu 1</span>
  <span>Menu 2</span>
  <span>Menu 3</span>
</div>