как с помощью Javascript или jquery заменить тег?

#javascript #jquery

Добрый день. Есть код: 

 бла бла бла 


Нужно чтобы при загрузке страницы тег div заменялся на span. Не нужно заменять целый
блок див, а нужно чтобы содержимое оставалось таким же, только вместо div чтобы был span.

Спасибо
    

Ответы

Ответ 1

Можно воспользоваться replaceWith, с помощью которого можно заменять элементы страницы
новыми элементами или уже существующими.



$('div.inner').replaceWith(function(){
    return $("", {html: $(this).html()});
});


  
Hello
  
And
  
Goodbye





или 



$('div.inner').replaceWith(function(){
    return $("").append($(this).contents());
});



  
Hello
  
And
  
Goodbye





документация на английском


Ответ 2

Решение на "чистом" JavaScript без использования дополнительных библиотек:

/**
 * @param {HTMLElement} element Элемент, имя тэга которого будет заменено.
 * @param {String} newTagName Новое имя тэга.
 */
function replaceTag(element, newTagName) {
    // Создаём новый тэг.
    var newTag = document.createElement(newTagName);

    // Вставляем новый тэг перед старым.
    element.parentElement.insertBefore(newTag, element);

    // Переносим в новый тэг атрибуты старого с их значениями.
    for (var i = 0, attrs = element.attributes, count = attrs.length; i < count; ++i)
        newTag.setAttribute(attrs[i].name, attrs[i].value);

    // Переносим в новый тэг все дочерние элементы старого.
    var childNodes = element.childNodes;
    while (childNodes.length > 0)
        newTag.appendChild(childNodes[0]);

    // Удаляем старый тэг.
    element.parentElement.removeChild(element);
}


Ответ 3

еще вариант без jQuery, с использованием replaceChild



[].forEach.call(document.querySelectorAll('div.inner'), function(divInner) {
  var span = document.createElement('span');
  span.innerHTML = divInner.innerHTML;
  divInner.parentNode.replaceChild(span, divInner);
});

  
Hello
  
And
  
Goodbye