JQuery и добавление без добавления места

У меня есть код:

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

Примечание. Между тегами span нет пробелов. Если я использую:

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

Приложение добавляет пробел в строке. Есть ли другой способ поместить тег без необходимости добавлять пробел?

Мне нужно, чтобы jquery генерировал такой код:

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

Спасибо.

Ответ 1

Это устраняет проблему:

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

jQuery добавлял ваш новый элемент после разрыва строки. Используя span:last-child, выберем последний пункт меню, а затем .after() добавит новый элемент напрямую после этого.

Обратите внимание, что это не будет работать, если .message в настоящее время пуст. Вам нужно будет проверить это и использовать ваш текущий код в этом случае, чтобы добавить первый элемент.

Смотрите результат здесь: http://jsfiddle.net/ZbSCU/

Ответ 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>

Ответ 3

Я не думаю, что это jQuery, вставляющее пробел. Ваш HTML содержит разрыв строки после второго интервала, поэтому я предполагаю, что это часть DOM, а jQuery добавляет элемент после него.

Вы можете попробовать эту альтернативу:

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

Ответ 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);

Ответ 5

В соответствии с этим http://jsfiddle.net/uPm2D/ то, что вы заявляете, неверно. Можете ли вы предоставить более подробную информацию? что может произойти, браузеры inter pret ваш код:

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