Подмена html тега JavaScript с назначением класса

@Dimka Mixov · Регистрация: 12.11.2013

Студворк — интернет-сервис помощи студентам

Доброго времени, уважаемые форумчане !

Суть заключается в том что бы динамически (после загрузки html) менять к примеру h4 на h2 там где это необходимо.

Изобрел скрипт подмены тегов, но не получается "оставить" класс у элемента.

В примеру есть в шаблоне вот такой html

HTML5
1
2
3
<div class="title-wrapp-site">
   <h4 class="title-site">Название сайта</h4>
</div>

Делаю подмену скриптом h4 на h2

JavaScript
1
2
3
4
5
jQuery(document).ready( function () {
   jQuery("h4.title-site").replaceWith(function(index, oldHTML){
      return jQuery("<h2>").html(oldHTML); // Добавить/оставить класс для нового элемента
   });
});

Все отлично, но класс у элемента h2 пропадает и получается так

HTML5
1
2
3
<div class="title-wrapp-site">
   <h2>Название сайта</h2>
</div>

Хотелось бы оставлять тот класс который был (родной) у h4 в данном примере или добавлять новый свой

@sad67man · 10.01.2018, 01:57

Dimka Mixov,

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$.fn.changeTag = function(tag) {
  var $result = $();
  this.each(function() {
    var $this = $(this);
    var replacement = $('<' + tag + '>');
    var attributes = {};
    $.each(this.attributes, function(index, attribute) {
      attributes[attribute.name] = attribute.value;
    });
    replacement.attr(attributes);
    replacement.data($this.data());
    replacement.html($this.html());
    $this.replaceWith(replacement);
    $result = $result.add(replacement);
 
  })
  return $result;
}
 
$('h4').changeTag('h2');

@Dimka Mixov · 10.01.2018, 16:11 **[ТС]**

sad67man - Благодарен Вам, то что нужно

Не много изменил на jQuery

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script type='text/javascript'>
    jQuery(document).ready( function () {
        jQuery.fn.changeTag = function(tag) {
        var $result = jQuery();
        this.each(function() {
        var $this = jQuery(this);
        var replacement = jQuery('<' + tag + '>');
        var attributes = {};
        jQuery.each(this.attributes, function(index, attribute) {
        attributes[attribute.name] = attribute.value;
        });
        
        replacement.attr(attributes);
        replacement.data($this.data());
        replacement.html($this.html());
        $this.replaceWith(replacement);
        $result = $result.add(replacement);
 
        })
        return $result;
        }
 
        jQuery('h3.entry-title').changeTag('h2');
        jQuery('.widget_nav_menu h4.td-block-title').changeTag('p');
 
    });
</script>

@Smls · 10.01.2018, 18:20

Так не проще?

JavaScript
1
$('h4.title-site').replaceWith('<h2  class="title-site">' + $('h4.title-site').html() +'</h2>');

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/

Подмена html тега JavaScript с назначением класса

Решение