JQuery - Как добавить один HTML-тег в какой-то HTML?

Во-первых, вам нужен искаженный HTML. jQuery усложнит, если не сделает невозможным, создание этого. Я бы посоветовал делать это в один шаг, а не в несколько. Пытаться:

$("li > a").each(function() {
  $(this).contents().wrapAll("<span>");
});

Вход:

<ul>
  <li><a href="...">testing</a></li>
  <li><a href="...">rich <b>content</b> with <i>inner tags</i></a></li>
</ul>

Выход:

<ul>
  <li><a href="..."><span>testing</span></a></li>
  <li><a href="..."><span>rich <b>content</b> with <i>inner tags</i></span></a></li> 
</ul>

Я столкнулся с проблемой, когда я использовал сторонний API, который использовал php curl для размещения плоского HTML на моей веб-странице. В возвращенном API HTML были некоторые искаженные теги span, которые просто убивали мой рендеринг в IE. Я использовал функцию replaceWith() Jquery, чтобы решить эту проблему. Вот пример:

Неправильный HTML: (обратите внимание на неоткрытый тег span)

<a class="aa_float_right aa_navlink" href="http:whatever">My Account</a></span> 

Мое решение:

$('.aa_navlink').replaceWith('<span class="test"><a class="aa_float_right aa_navlink" href="http:whatever">My Account</a>');

Результирующий HTML:

<span class="test"><a class="aa_float_right aa_navlink" href="http:whatever">My Account</a></span>

БУМ, теперь у нас есть хорошо сформированный HTML, нет, спасибо, такой дрянной сторонний API (и я имею в виду действительно дрянной).

Это исправление было предоставлено мне разработчиками из SaltWater Co..

Я не знаю, зачем вам это нужно, но это можно сделать так,

$('#mainnav li a').html(function(i,v){
   return '<span>' + v;
})

Когда вы используете prepend, вы добавляете на страницу не текст разметки, а элементы. Элементы не имеют тегов «начало» и «конец», элементы есть элементы. Если вы хотите обернуть кучу элементов в span (я предполагаю, что вы этого хотите, если вы хотите вставить его начало в одном месте, а конец в другом), вам нужно добавить диапазон в контейнер, а затем переместите в него элементы.

Например, это перемещает все ссылки из элемента foo и перемещает их в диапазон внутри container:

var stuff;
var container;

stuff = $('#foo a');
span = $("<span style='background-color: yellow'>");
span.append(stuff);
$('#container').append(span);

Многие методы jQuery предназначены для автоматического создания элементов только из наполовину написанных тегов, например, "<span>" для .prepend() приведет к тому, что в DOM будет добавлен весь элемент span. Или, как вы увидите в Firebug, "<span></span>" вставляется первым в элемент привязки.

Я не понимаю, почему вы хотите создать недопустимый HTML, но если вам нужно, вы можете сделать это следующим образом:

$("li > a").html("<span>"+$("li > a").html());

Или, как предлагает Рейгель, с анонимной функцией к методу .html() (свой ответ я написал довольно быстро и, очевидно, непродуманно):

$("li > a").html(function (idx, html) {
    return "<span>" + html;
});

В противном случае может показаться, что вы хотите обернуть содержимое элемента привязки в диапазон. В этом случае вместо этого следует использовать один из jQuery обтекание методы:

$("li > a").wrap("<span>");

Вы не должны сами создавать как начальный, так и закрывающий элемент (при использовании jQuery).