使用jQuery更改HTML标记？

Question

这可能吗？

例:

$('a.change').click(function(){
//code to change p tag to h5 tag
});


<p>Hello!</p>
<a id="change">change</a>

因此,单击更改锚点会导致该<p>Hello!</p>部分更改为(作为示例)h5标记,因此您将<h5>Hello!</h5>在单击后结束.我意识到你可以删除p标签并用h5替换它,但无论如何实际修改HTML标签？

Answer 1

一旦创建了dom元素,我相信标签是不可变的.你必须做这样的事情:

$(this).replaceWith($('<h5>' + this.innerHTML + '</h5>'));

Answer 2

这是一个可以完成所有工作的扩展,在很多方面有很多元素......

用法示例:

保留现有的类和属性:

$('div#change').replaceTag('<span>', true);

要么

丢弃现有的类和属性:

$('div#change').replaceTag('<span class=newclass>', false);

甚至

用跨度,复制类和属性替换所有div,添加额外的类名

$('div').replaceTag($('<span>').addClass('wasDiv'), true);

插件来源:

$.extend({
    replaceTag: function (currentElem, newTagObj, keepProps) {
        var $currentElem = $(currentElem);
        var i, $newTag = $(newTagObj).clone();
        if (keepProps) {//{{{
            newTag = $newTag[0];
            newTag.className = currentElem.className;
            $.extend(newTag.classList, currentElem.classList);
            $.extend(newTag.attributes, currentElem.attributes);
        }//}}}
        $currentElem.wrapAll($newTag);
        $currentElem.contents().unwrap();
        // return node; (Error spotted by Frank van Luijn)
        return this; // Suggested by ColeLawrence
    }
});

$.fn.extend({
    replaceTag: function (newTagObj, keepProps) {
        // "return" suggested by ColeLawrence
        return this.each(function() {
            jQuery.replaceTag(this, newTagObj, keepProps);
        });
    }
});

Answer 3

您应该更改标记的样式(或者更确切地说,标记具有特定ID的标记),而不是更改标记的类型.更改文档元素以应用样式更改不是一个好习惯.试试这个:

$('a.change').click(function() {
    $('p#changed').css("font-weight", "bold");
});

<p id="changed">Hello!</p>
<a id="change">change</a>

Answer 4

我注意到第一个答案并不是我所需要的,所以我做了一些修改,并想到我会把它发回这里.

改进 replaceTag(<tagName>)

replaceTag(<tagName>, [withDataAndEvents], [withDataAndEvents])

参数:

• tagName:String
  • 标签名称例如"div","span"等.
• withDataAndEvents:Boolean
  • "一个布尔值,指示是否应该将事件处理程序与元素一起复制.从jQuery 1.4开始,元素数据也将被复制." 信息
• deepWithDataAndEvents:Boolean,
  • 一个布尔值,指示是否应复制克隆元素的所有子项的事件处理程序和数据.默认情况下,它的值与第一个参数的值匹配(默认为false)." info

返回:

一个新创建的jQuery元素

好的,我知道现在有一些答案,但是我自己再把它写下来了.

在这里,我们可以像使用克隆一样替换标签.我们遵循同样的语法.clone()与withDataAndEvents和deepWithDataAndEvents其复制子,如果使用节点的数据和事件.

例:

$tableRow.find("td").each(function() {
  $(this).clone().replaceTag("li").appendTo("ul#table-row-as-list");
});

资源:

$.extend({
    replaceTag: function (element, tagName, withDataAndEvents, deepWithDataAndEvents) {
        var newTag = $("<" + tagName + ">")[0];
        // From [Stackoverflow: Copy all Attributes](http://stackoverflow.com/a/6753486/2096729)
        $.each(element.attributes, function() {
            newTag.setAttribute(this.name, this.value);
        });
        $(element).children().clone(withDataAndEvents, deepWithDataAndEvents).appendTo(newTag);
        return newTag;
    }
})
$.fn.extend({
    replaceTag: function (tagName, withDataAndEvents, deepWithDataAndEvents) {
        // Use map to reconstruct the selector with newly created elements
        return this.map(function() {
            return jQuery.replaceTag(this, tagName, withDataAndEvents, deepWithDataAndEvents);
        })
    }
})

请注意,这不会替换所选元素,而是返回新创建的元素.

Answer 5

想法是包装元素并解开内容：

function renameElement($element,newElement){

    $element.wrap("<"+newElement+">");
    $newElement = $element.parent();

    //Copying Attributes
    $.each($element.prop('attributes'), function() {
        $newElement.attr(this.name,this.value);
    });

    $element.contents().unwrap();       

    return $newElement;
}

示例用法：

renameElement($('p'),'h5');

演示