jQuery：如何更改标签名称？
例如：
<tr>
$1
</tr>
我需要
<div>
$1
</div>
是的，我可以
但我可以直接制作吗？
PS：
$(tr).get(0).tagName = "div";
结果为DOMException。
答案 0 :(得分：43)
不，根据W3C规范是不可能的：“DOMString类型的tagName，readonly”
答案 1 :(得分：35)
您可以使用jQuery的.replaceWith()方法替换任何HTML标记。
参考：。replaceWith
如果要保留现有标记，可以使用以下代码：
$('#target').replaceWith('<newTag>' + $('target').html() +'</newTag>')
答案 2 :(得分：13)
今天（2014年），没有浏览器了解new DOM3 renameNode method（请参阅also W3C） 检查是否在你的保龄球运行：http://jsfiddle.net/k2jSm/1/
所以，DOM解决方案很难看，我不明白为什么（？）jQuery没有实现变通方法？
createElement(new_name) replaceChild() 是这样的，
function rename_element(node,name) {
var renamed = document.createElement(name);
foreach (node.attributes as a) {
renamed.setAttribute(a.nodeName, a.nodeValue);
}
while (node.firstChild) {
renamed.appendChild(node.firstChild);
}
return node.parentNode.replaceChild(renamed, node);
}
...等待审核和jsfiddle ......
@ilpoldo算法是一个很好的起点，
$from.replaceWith($('<'+newname+'/>').html($from.html()));
正如其他人评论的那样，它需要一个属性副本......等待通用......
特定于class，保留属性，请参阅http://jsfiddle.net/cDgpS/
答案 3 :(得分：9)
上述解决方案消除了现有元素并从头开始重新创建，破坏了过程中对子节点的任何事件绑定。
简短回答：（失去属性）
$("p").wrapInner("<div/>").children(0).unwrap();
更长的回答：（副本的属性）
$("p").each(function (o, elt) {
var newElt = $("<div class='p'/>");
Array.prototype.slice.call(elt.attributes).forEach(function(a) {
newElt.attr(a.name, a.value);
});
$(elt).wrapInner(newElt).children(0).unwrap();
});
同时复制任何绑定会很酷，但getting current bindings对我不起作用。
答案 4 :(得分：7)
要保留代码的内部内容，您可以将访问者.html()与.replaceWith()
答案 5 :(得分：2)
你可以有点基础。适合我。
var oNode = document.getElementsByTagName('tr')[0];
var inHTML = oNode.innerHTML;
oNode.innerHTML = '';
var outHTML = oNode.outerHTML;
outHTML = outHTML.replace(/tr/g, 'div');
oNode.outerHTML = outHTML;
oNode.innerHTML = inHTML;
答案 6 :(得分：1)
要替换多个标记的内部内容，每个标记都有自己的原始内容，您必须以不同的方式使用.replaceWith()和.html()：
答案 7 :(得分：1)
受ericP答案的启发，格式化并转换为jQuery插件：
$.fn.replaceWithTag = function(tagName) {
var result = [];
this.each(function() {
var newElem = $('<' + tagName + '>').get(0);
for (var i = 0; i < this.attributes.length; i++) {
newElem.setAttribute(
this.attributes[i].name, this.attributes[i].value
);
}
newElem = $(this).wrapInner(newElem).children(0).unwrap().get(0);
result.push(newElem);
});
return $(result);
};
用法：
$('div').replaceWithTag('span')
答案 8 :(得分：1)
JS更改标记名称
/**
* This function replaces the DOM elements's tag name with you desire
* Example:
* replaceElem('header','ram');
* replaceElem('div.header-one','ram');
*/
function replaceElem(targetId, replaceWith){
$(targetId).each(function(){
var attributes = concatHashToString(this.attributes);
var replacingStartTag = '<' + replaceWith + attributes +'>';
var replacingEndTag = '</' + replaceWith + '>';
$(this).replaceWith(replacingStartTag + $(this).html() + replacingEndTag);
});
}
replaceElem('div','span');
/**
* This function concats the attributes of old elements
*/
function concatHashToString(hash){
var emptyStr = '';
$.each(hash, function(index){
emptyStr += ' ' + hash[index].name + '="' + hash[index].value + '"';
});
return emptyStr;
}
相关小提琴就在这个link
中答案 9 :(得分：0)
也试试这个。在这个例子中，我们也可以在新标签中拥有旧标签的属性
var newName = document.querySelector('.test').outerHTML.replaceAll('h1', 'h2');
document.querySelector('.test').outerHTML = newName;<h1 class="test">Replace H1 to H2</h1>答案 10 :(得分：0)
工作纯DOM算法
function rename_element(node, name) {
let renamed = document.createElement(name);
Array.from(node.attributes).forEach(attr => {
renamed.setAttribute(attr.name, attr.value);
})
while (node.firstChild) {
renamed.appendChild(node.firstChild);
}
node.parentNode.replaceChild(renamed, node);
return renamed;
}
答案 11 :(得分：0)
您可以使用此功能
var renameTag = function renameTag($obj, new_tag) {
var obj = $obj.get(0);
var tag = obj.tagName.toLowerCase();
var tag_start = new RegExp('^<' + tag);
var tag_end = new RegExp('<\\/' + tag + '>$');
var new_html = obj.outerHTML.replace(tag_start, "<" + new_tag).replace(tag_end, '</' + new_tag + '>');
$obj.replaceWith(new_html);
};
ES6
const renameTag = function ($obj, new_tag) {
let obj = $obj.get(0);
let tag = obj.tagName.toLowerCase();
let tag_start = new RegExp('^<' + tag);
let tag_end = new RegExp('<\\/' + tag + '>$');
let new_html = obj.outerHTML.replace(tag_start, "<" + new_tag).replace(tag_end, '</' + new_tag + '>');
$obj.replaceWith(new_html);
};
示例代码
renameTag($(tr),'div');
答案 12 :(得分：0)
另一个更改节点名称的脚本
function switchElement() {
$element.each(function (index, oldElement) {
let $newElement = $('<' + nodeName + '/>');
_.each($element[0].attributes, function(attribute) {
$newElement.attr(attribute.name, attribute.value);
});
$element.wrapInner($newElement).children().first().unwrap();
});
}
http://jsfiddle.net/rc296owo/5/
它会将属性和内部html复制到一个新元素中，然后替换旧元素。
答案 13 :(得分：0)
Jquery插件制作＆＃34; tagName＆＃34;可编辑：
(function($){
var $newTag = null;
$.fn.tagName = function(newTag){
this.each(function(i, el){
var $el = $(el);
$newTag = $("<" + newTag + ">");
// attributes
$.each(el.attributes, function(i, attribute){
$newTag.attr(attribute.nodeName, attribute.nodeValue);
});
// content
$newTag.html($el.html());
$el.replaceWith($newTag);
});
return $newTag;
};
})(jQuery);
答案 14 :(得分：0)
用Word解答问题“如何更改标签名称？”我建议这个解决方案：
如果有意义或必须逐案决定。
我的示例将“重命名”所有带有span标签的带有超链接的标签。维护所有属性和内容：
$('a[href^="sms:"]').each(function(){
var $t=$(this);
var $new=$($t.wrap('<div>')
.parent()
.html()
.replace(/^\s*<\s*a/g,'<span')
.replace(/a\s*>\s*$/g,'span>')
).attr('href', null);
$t.unwrap().replaceWith($new);
});
由于具有href属性的span标记没有任何意义，我也删除它。 这样做是防弹的，并且与jquery支持的所有浏览器兼容。 人们尝试将所有属性复制到新元素还有其他方法，但这些方法与所有浏览器都不兼容。
虽然我认为以这种方式做这件事非常昂贵。
答案 15 :(得分：0)
由于replaceWith()在元素基础上对我不起作用（可能是因为我在map()中使用它），我通过创建一个新元素并根据需要复制属性来实现它。 p>
$items = $('select option').map(function(){
var
$source = $(this),
$copy = $('<li></li>'),
title = $source.text().replace( /this/, 'that' );
$copy
.data( 'additional_info' , $source.val() )
.text(title);
return $copy;
});
$('ul').append($items);
答案 16 :(得分：0)
简单地更改属性值将不会这样做（正如其他人所说的，一些HTMLElement属性是只读的;还有一些属性将原型上下文保存到更原始的元素）。模仿DOM API最接近的是模仿JavaScript中的原型继承过程。
通过__proto__对对象的原型进行“设置”通常是不受欢迎的。此外，您可能会考虑为什么您认为首先需要复制整个DOM元素。但是这里有：
// Define this at whatever scope you'll need to access it
// Most of these kinds of constructors are attached to the `window` object
window.HTMLBookElement = function() {
function HTMLBookElement() {
var book = document.createElement('book');
book.__proto__ = document.createElement('audio');
return book;
}
return new HTMLBookElement();
}
// Test your new element in a console (I'm assuming you have Chrome)
var harryPotter = new HTMLBookElement();
// You should have access to your new `HTMLBookElement` API as well as that
// of its prototype chain; since I prototyped `HTMLAudioElement`, you have
// some default properties like `volume` and `preload`:
console.log(harryPotter); // should log "<book></book>"
console.log(harryPotter.volume); // should log "1"
console.log(harryPotter.preload); // should log "auto"
所有DOM元素都以这种方式工作。例如：
<div></div>由HTMLDivElement生成，
扩展HTMLElement，
反过来扩展Element，
反过来扩展Object。