Question

是否可以将<h4>text here</h4>更改为<h1>text here</h1> 我知道如何添加类并更改样式，但是当我希望它真正成为H1时，此代码中有一些东西将其编码为H4

Answer 1

最简单的方法是完全替换h4元素：

$('h4').replaceWith(function() {
    return $('<h1 />', { html: $(this).html() });
});

Example fiddle

Answer 2

Vanilla JS解决方案：

function changeElementType(element, newtype) {
    var newelement = document.createElement(newtype);

    // move children
    while(element.firstChild) newelement.appendChild(element.firstChild);

    // copy attributes
    for( var i=0, a=element.attributes, l=a.length; i<l; i++) {
        newelement.attributes[a[i].name] = a[i].value;
    }

    // event handlers on children will be kept. Unfortunately, there is
    // no easy way to transfer event handlers on the element itself,
    // this would require a full management system for events, which is
    // beyond the scope of this answer. If you figure it out, do it here.

    element.parentNode.replaceChild(newelement, element);
}

您现在可以拨打电话，例如：

changeElementType(document.getElementsByTagName('h4')[0], "h1");

将页面上的第一个<h4>更改为<h1>。

Answer 3

简短的vanilla-js解决方案

var newEl = document.createElement('h1');
newEl.innerHTML = oldEl.innerHTML;
oldEl.parentNode.replaceChild(newEl, oldEl);

请注意，这会破坏添加到oldEl或其后代的所有事件处理程序和数据。

有关更完整的解决方案，请参阅NiettheDarkAbsol's answer。

使用javascript更改标记名

3 个答案: