Вы должны использовать replaceWith
из jQuery API
Если вы хотите преобразовать тег заголовка в ссылку (как вы сделали для 4-го заголовка),
$('h3').each(function() {
var id = $(this).attr('id');
if (id) { //To make sure the element has an id
$(this).replaceWith(function () {
return $('<a/>', {
id,
href: '#' + $(this).attr('id'),
text: $(this).text(),
});
});
}
});
Ссылка на jsFiddle
Если вы хотите сохранить теги заголовков и окружить заголовок тегом ссылки
$('h3').each(function() {
var id = $(this).attr('id');
if (id) { //To make sure the element has an id
$(this).replaceWith(function () {
return $('<a/>', {
href: '#' + $(this).attr('id'),
html: `<h3 id=${id}>` + $(this).text() + '</h3>',
});
});
}
})
Ссылка на jsFiddle