Замена тегов HTML документа на jQuery

Раздел языка JavaScript.
Аватара пользователя
Slash
Администратор
Сообщения: 2122
Зарегистрирован: Сб авг 11, 2012 7:39 am
Поблагодарили: 75 раз

Замена тегов HTML документа на jQuery

Сообщение Slash » Ср фев 17, 2016 11:02 am

Краткое описание, как заменить тег на другой в HTML документе на jQuery. Например необходимо по клику ссылке убрать саму ссылку, оставить только её анкор, или полностью заменить ссылку на блок. Замену будет производить функция replaceWith(), данная функция как раз и создана для замены HTML тегов.

Для работы сценария, необходимо подключить jQuery, для этого вставьте следующею строчку в свой документ:

Код: Выделить всё

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
Сами ссылки, от которых останется только анкор после щелчка:

Код: Выделить всё

<a href="page1.html">Первая страница</a>
<a href="page2.html">Вторая страница</a>
<a href="page3.html">Третья страница</a> 
Код замены ссылок на их анкор:

Код: Выделить всё

<script type="text/javascript">
$('a').click(function()
{
    $(this).replaceWith($(this).text());
    return false;
});
</script>
Весь выше представленный код должен быть размещен в одном документе.
Теперь по клику ссылки остается только ее анкор.

Что бы по клику ссылки, ссылка заменялась на блок (<div>) достаточно в функцию replaceWith() дописать соответствующие теги, например:

Код: Выделить всё

$('a').click(function()
{
    $(this).replaceWith('<div>' + $(this).text() + '</div>');
    return false;
}); 
Добавить стиль оформления блока и готово!

Спасибо за внимание.

Реклама

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость