使用jQuery更改HTML标记？

Question

使用jQuery更改HTML标记？

这个是可能的吗？

例子：

$('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

这里有一个扩展，可以用同样多的方式完成所有的任务.示例用法：保留现有的类和属性：$('div#change').replaceTag('<span>', true);或丢弃现有类和属性：$('div#change').replaceTag('<span class=newclass>', false);甚至将所有div替换为span、复制类和属性，添加额外的类名。$('div').replaceTag($('<span>').addClass('wasDiv'), true);插件来源：$.extend({ &nbsp;&nbsp;&nbsp;&nbsp;replaceTag:&nbsp;function&nbsp;(currentElem,&nbsp;newTagObj,&nbsp;keepProps)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;$currentElem&nbsp;=&nbsp;$(currentElem); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;i,&nbsp;$newTag&nbsp;=&nbsp;$(newTagObj).clone(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(keepProps)&nbsp;{//{{{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newTag&nbsp;=&nbsp;$newTag[0]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newTag.className&nbsp;=&nbsp;currentElem.className; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.extend(newTag.classList,&nbsp;currentElem.classList); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.extend(newTag.attributes,&nbsp;currentElem.attributes); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}//}}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$currentElem.wrapAll($newTag); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$currentElem.contents().unwrap(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;return&nbsp;node;&nbsp;(Error&nbsp;spotted&nbsp;by&nbsp;Frank&nbsp;van&nbsp;Luijn) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;this;&nbsp;//&nbsp;Suggested&nbsp;by&nbsp;ColeLawrence &nbsp;&nbsp;&nbsp;&nbsp;}});$.fn.extend({ &nbsp;&nbsp;&nbsp;&nbsp;replaceTag:&nbsp;function&nbsp;(newTagObj,&nbsp;keepProps)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;"return"&nbsp;suggested&nbsp;by&nbsp;ColeLawrence &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;this.each(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jQuery.replaceTag(this,&nbsp;newTagObj,&nbsp;keepProps); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;}});