这可能吗？
示例：
$('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 标签？
【问题讨论】：
标签： jquery
我相信，一旦创建了 dom 元素，标签就是不可变的。你必须这样做：
$(this).replaceWith($('<h5>' + this.innerHTML + '</h5>'));
【讨论】：
"<" + el.outerHTML.replace(/(^<\w+|\w+>$)/g, "H5") + ">"; 或可插入的jQuery函数：link
这是一个扩展，可以在尽可能多的元素上以尽可能多的方式完成所有工作......
示例用法：
保留现有的类和属性：
$('div#change').replaceTag('<span>', true);
或
丢弃现有的类和属性：
$('div#change').replaceTag('<span class=newclass>', false);
甚至
用 span 替换所有 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);
});
}
});
【讨论】：
return node; 实际上应该是 return this;，如插件的“旧版本”所示。这对于将事件链接在一起至关重要，例如$("tr:first").find("td").clone().replaceTag("li").appendTo("ul#list")
$('div[itemprop="upvoteCount"]').replaceTag($('<span>').addClass('wasDiv'), true);
您应该更改标签的样式（或者更确切地说，更改具有特定 id 的标签）而不是更改标签的类型。更改文档的元素以应用样式更改并不是一个好习惯。试试这个：
$('a.change').click(function() {
$('p#changed').css("font-weight", "bold");
});
<p id="changed">Hello!</p>
<a id="change">change</a>
【讨论】：
我注意到第一个答案并不是我所需要的，所以我做了一些修改并想把它贴回这里。
replaceTag(<tagName>)
replaceTag(<tagName>, [withDataAndEvents], [withDataAndEvents])
参数：
返回：
一个新创建的 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);
})
}
})
请注意，此不会替换所选元素，它会返回新创建的元素。
【讨论】：
.children() 不会包含任何纯文本节点。你可能想试试.contents()IIRC。
想法是包装元素并打开内容：
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');
【讨论】：
我想出了一种方法，您可以使用 jQuery 对象的字符串表示，并使用正则表达式和基本 JavaScript 替换标记名称。您不会丢失任何内容，也不必遍历每个属性/属性。
/*
* replaceTag
* @return {$object} a new object with replaced opening and closing tag
*/
function replaceTag($element, newTagName) {
// Identify opening and closing tag
var oldTagName = $element[0].nodeName,
elementString = $element[0].outerHTML,
openingRegex = new RegExp("^(<" + oldTagName + " )", "i"),
openingTag = elementString.match(openingRegex),
closingRegex = new RegExp("(<\/" + oldTagName + ">)$", "i"),
closingTag = elementString.match(closingRegex);
if (openingTag && closingTag && newTagName) {
// Remove opening tag
elementString = elementString.slice(openingTag[0].length);
// Remove closing tag
elementString = elementString.slice(0, -(closingTag[0].length));
// Add new tags
elementString = "<" + newTagName + " " + elementString + "</" + newTagName + ">";
}
return $(elementString);
}
最后，您可以按如下方式替换现有对象/节点：
var $newElement = replaceTag($rankingSubmit, 'a');
$('#not-an-a-element').replaceWith($newElement);
【讨论】：
这是我的解决方案。它允许在标签之间切换。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
function wrapClass(klass){
return 'to-' + klass;
}
function replaceTag(fromTag, toTag){
/** Create selector for all elements you want to change.
* These should be in form: <fromTag class="to-toTag"></fromTag>
*/
var currentSelector = fromTag + '.' + wrapClass(toTag);
/** Select all elements */
var $selected = $(currentSelector);
/** If you found something then do the magic. */
if($selected.size() > 0){
/** Replace all selected elements */
$selected.each(function(){
/** jQuery current element. */
var $this = $(this);
/** Remove class "to-toTag". It is no longer needed. */
$this.removeClass(wrapClass(toTag));
/** Create elements that will be places instead of current one. */
var $newElem = $('<' + toTag + '>');
/** Copy all attributes from old element to new one. */
var attributes = $this.prop("attributes");
$.each(attributes, function(){
$newElem.attr(this.name, this.value);
});
/** Add class "to-fromTag" so you can remember it. */
$newElem.addClass(wrapClass(fromTag));
/** Place content of current element to new element. */
$newElem.html($this.html());
/** Replace old with new. */
$this.replaceWith($newElem);
});
/** It is possible that current element has desired elements inside.
* If so you need to look again for them.
*/
replaceTag(fromTag, toTag);
}
}
</script>
<style type="text/css">
section {
background-color: yellow;
}
div {
background-color: red;
}
.big {
font-size: 40px;
}
</style>
</head>
<body>
<button onclick="replaceTag('div', 'section');">Section -> Div</button>
<button onclick="replaceTag('section', 'div');">Div -> Section</button>
<div class="to-section">
<p>Matrix has you!</p>
<div class="to-section big">
<p>Matrix has you inside!</p>
</div>
</div>
<div class="to-section big">
<p>Matrix has me too!</p>
</div>
</body>
</html>【讨论】：
这是使用 jQuery 在 DOM 中更改 HTML 标签的快速方法。我发现这个replaceWith() 函数非常有用。
var text= $('p').text();
$('#change').on('click', function() {
target.replaceWith( "<h5>"+text+"</h5>" );
});
【讨论】：
您可以通过data-* 属性如data-replace="replaceTarget,replaceBy" 来实现，因此在jQuery 的帮助下通过.split() 方法获取replaceTarget 和replaceBy 值，然后使用.replaceWith() 方法。
这种data-* 属性技术可以轻松管理任何标签替换，而无需更改以下内容（所有标签替换的通用代码）。
希望下面的sn-p能帮到你。
$(document).on('click', '[data-replace]', function(){
var replaceTarget = $(this).attr('data-replace').split(',')[0];
var replaceBy = $(this).attr('data-replace').split(',')[1];
$(replaceTarget).replaceWith($(replaceBy).html($(replaceTarget).html()));
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="abc">Hello World #1</p>
<a href="#" data-replace="#abc,<h1/>">P change with H1 tag</a>
<hr>
<h2 id="xyz">Hello World #2</h2>
<a href="#" data-replace="#xyz,<p/>">H1 change with P tag</a>
<hr>
<b id="bold">Hello World #2</b><br>
<a href="#" data-replace="#bold,<i/>">B change with I tag</a>
<hr>
<i id="italic">Hello World #2</i><br>
<a href="#" data-replace="#italic,<b/>">I change with B tag</a>【讨论】：
以下函数可以解决问题并保留所有属性。例如，您可以像这样使用它：changeTag("div", "p")
function changeTag(originTag, destTag) {
while($(originTag).length) {
$(originTag).replaceWith (function () {
var attributes = $(this).prop("attributes");
var $newEl = $(`<${destTag}>`)
$.each(attributes, function() {
$newEl.attr(this.name, this.value);
});
return $newEl.html($(this).html())
})
}
}
为确保它有效，请检查以下示例
function changeTag(originTag, destTag) {
while($(originTag).length) {
$(originTag).replaceWith (function () {
var attributes = $(this).prop("attributes");
var $newEl = $(`<${destTag}>`)
$.each(attributes, function() {
$newEl.attr(this.name, this.value);
});
return $newEl.html($(this).html())
})
}
}
changeTag("div", "p")
console.log($("body").html())<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="A" style="font-size:1em">
<div class="B" style="font-size:1.1em">A</div>
</div>
<div class="C" style="font-size:1.2em">
B
</div>
</body>【讨论】：
是否有特定原因需要更改标签？如果你只是想让文本变大，改变 p 标签的 CSS 类会是一个更好的方法。
类似这样的：
$('#change').click(function(){
$('p').addClass('emphasis');
});
【讨论】：