blocks|key|3029253|text|您可以使用jQuery的.replaceWith()方法替换任何HTML标记。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3029254|示例：http://jsfiddle.net/JHmaV/|3029255|参考：。replaceWith|3029256|如果你想保留现有的标记，你可以使用如下代码：|3029257|$('#target').replaceWith('<newTag>'+%2B+$('#target').html()+%2B'</newTag>')|code-block|syntax|javascript|3029258|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/JHmaV/|1|http://api.jquery.com/replaceWith/^0|C|E|0|3|Q|0|0|4|B|1|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|H|3|I|5|6|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|J|3|K|5|6|7|1B|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|1C|8|@]|D|@]|E|$O|P]]|$1|Q|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]]]

<p>You can replace any HTML markup by using jQuery's <code>.replaceWith()</code> method.</p>

<p>example: <a href="http://jsfiddle.net/JHmaV/" rel="noreferrer">http://jsfiddle.net/JHmaV/</a></p>

<p>Ref.: .<a href="http://api.jquery.com/replaceWith/" rel="noreferrer">replaceWith</a></p>

<p>If you want to keep the existing markup, you could use code like this:</p>

<pre><code>$('#target').replaceWith('&lt;newTag&gt;' + $('#target').html() +'&lt;/newTag&gt;')
</code></pre>


blocks|key|3243475|text|不，根据W3C规范，这是不可能的："tagName+of+type+DOMString，readonly“|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3243476|http://www.w3.org/TR/DOM-Level-2-Core/core.html|offset|length|3243477|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1B|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

<p>No, it is not possible according to W3C specification: "tagName of type DOMString, readonly"</p>

<p><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html" rel="noreferrer">http://www.w3.org/TR/DOM-Level-2-Core/core.html</a></p>


blocks|key|3029307|text|要保留标记的内部内容，可以结合使用访问器.html()和.replaceWith()|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3029308|派生示例：http://jsfiddle.net/WVb2Q/1/|3029309|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/WVb2Q/1/^0|K|7|S|E|0|5|S|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@$9|V|A|W|1|X]]|E|$]]|$1|H|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>To preserve the internal content of the tag you can use the accessor <code>.html()</code> in conjunction with <code>.replaceWith()</code></p>

<p>forked example: <a href="http://jsfiddle.net/WVb2Q/1/" rel="noreferrer">http://jsfiddle.net/WVb2Q/1/</a></p>


blocks|key|3029319|text|要替换多个标记的内部内容，每个标记都有自己的原始内容，您必须以不同方式使用.replaceWith()和.html()：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3029320|http://jsfiddle.net/kcrca/VYxxG/|3029321|entityMap|0|LINK|mutability|MUTABLE|url^0|11|E|1G|7|0|0|W|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@$9|U|A|V|1|W]]|E|$]]|$1|H|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|G]]]]

<p>To replace the internal contents of <em>multiple</em> tags, each with their own original content, you have to use <code>.replaceWith()</code> and <code>.html()</code> differently:</p>

<p><a href="http://jsfiddle.net/kcrca/VYxxG/" rel="nofollow">http://jsfiddle.net/kcrca/VYxxG/</a></p>


blocks|key|3029332|text|简单地更改属性值是做不到的(正如其他人所说的，一些HTMLElement属性是只读的；还有一些拥有更多原始元素的原型上下文)。最接近于模仿DOM的方法是也模仿JavaScript中的原型继承过程。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3029333|通过__proto__对对象的原型进行“设置”通常是不受欢迎的。此外，您可能会考虑为什么一开始就需要复制整个DOM元素。但这里是这样的：|3029334|//+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"|code-block|syntax|javascript|3029335|所有的DOM元素都是这样工作的。例如：<div></div>是由HTMLDivElement生成的，它扩展了HTMLElement，进而扩展了Element，而后者又扩展了Object。|3029336|entityMap^0|P|B|0|2|9|0|0|J|B|W|E|1I|B|1Z|7|2E|6|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|P|$]]

<p>Simply changing the property values won't do it (as others have said, some <code>HTMLElement</code> properties are read-only; also some hold prototypal context to more primitive elements). The closest thing you can get to mimicking the DOM API is to mimic also the process of prototypal inheritance in JavaScript. </p>

<p>'Setting' on an object's prototype via <code>__proto__</code> is generally frowned upon. Also, you might consider why you think you need to duplicate the entire DOM element in the first place. But here goes:</p>

<pre><code>// 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 "&lt;book&gt;&lt;/book&gt;"
console.log(harryPotter.volume);  // should log "1"
console.log(harryPotter.preload); // should log "auto"
</code></pre>

<p>All DOM elements work this way. For example:
<code>&lt;div&gt;&lt;/div&gt;</code> is produced by <code>HTMLDivElement</code>,
which extends <code>HTMLElement</code>, 
which in turn extends <code>Element</code>,
which in turn extends <code>Object</code>.</p>


blocks|key|298163|text|你可以做一些基础的工作。这对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|298164|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;|code-block|syntax|javascript|298165|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You could go a little basic. Works for me.</p>

<pre><code>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;
</code></pre>


blocks|key|300559|text|DOM+renameNode()方法在哪里？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|300560|现在(2014年)没有浏览器能够理解new+DOM3+renameNode+method+(参见also+W3C)检查是否在您的浏览器上运行：http://jsfiddle.net/k2jSm/1/|offset|length|300561|所以，DOM解决方案是丑陋的，我不理解为什么(??)jQuery未实施解决方法-|style|BOLD|300562|纯DOM算法|300563|300564|createElement(new_name)+|ordered-list-item|CODE|300565|将所有内容复制到新元素；replaceChild()|300566|将|300567|从旧替换为新|unordered-list-item|300568|300569|是这样的，|300570|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);
}|code-block|syntax|javascript|300571|..。等待审查和jsfiddle+...|300572|jQuery算法|300573|@ilpoldo算法是一个很好的起点，|300574|+++$from.replaceWith($('<'%2Bnewname%2B'/>').html($from.html()));|300575|正如其他人评论的那样，它需要一个属性副本...等等通用的..。|300576|特定于保留属性的class，请参见http://jsfiddle.net/cDgpS/|300577|另请参阅https://stackoverflow.com/a/9468280/287948|300578|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/jsref/met_document_renamenode.asp|1|http://www.w3.org/TR/DOM-Level-3-Core/core.html|2|http://jsfiddle.net/k2jSm/1/|3|http://jsfiddle.net/cDgpS/|4|https://stackoverflow.com/a/9468280/287948^0|0|I|Q|0|1C|8|1|1Z|S|2|0|J|L|0|0|0|0|N|0|C|E|0|0|0|0|0|0|0|0|0|0|0|8|5|H|Q|3|0|4|16|4|0^^$0|@$1|2|3|4|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|20|8|@]|9|@$D|21|E|22|1|23]|$D|24|E|25|1|26]|$D|27|E|28|1|29]]|A|$]]|$1|F|3|G|5|6|7|2A|8|@$D|2B|E|2C|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|2D|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|2E|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|2F|8|@$D|2G|E|2H|H|P]]|9|@]|A|$]]|$1|Q|3|R|5|O|7|2I|8|@$D|2J|E|2K|H|P]]|9|@]|A|$]]|$1|S|3|T|5|6|7|2L|8|@]|9|@]|A|$]]|$1|U|3|V|5|W|7|2M|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|2N|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|2O|8|@]|9|@]|A|$]]|$1|10|3|11|5|12|7|2P|8|@]|9|@]|A|$13|14]]|$1|15|3|16|5|6|7|2Q|8|@]|9|@]|A|$]]|$1|17|3|18|5|6|7|2R|8|@]|9|@]|A|$]]|$1|19|3|1A|5|6|7|2S|8|@]|9|@]|A|$]]|$1|1B|3|1C|5|12|7|2T|8|@]|9|@]|A|$13|14]]|$1|1D|3|1E|5|6|7|2U|8|@]|9|@]|A|$]]|$1|1F|3|1G|5|6|7|2V|8|@$D|2W|E|2X|H|P]]|9|@$D|2Y|E|2Z|1|30]]|A|$]]|$1|1H|3|1I|5|6|7|31|8|@]|9|@$D|32|E|33|1|34]]|A|$]]|$1|1J|3|-4|5|6|7|35|8|@]|9|@]|A|$]]]|1K|$1L|$5|1M|1N|1O|A|$1P|1Q]]|1R|$5|1M|1N|1O|A|$1P|1S]]|1T|$5|1M|1N|1O|A|$1P|1U]]|1V|$5|1M|1N|1O|A|$1P|1W]]|1X|$5|1M|1N|1O|A|$1P|1Y]]]]

<h2>Where the DOM renameNode() Method?</h2>

<p>Today (2014) no browser understand the <a href="http://www.w3schools.com/jsref/met_document_renamenode.asp" rel="noreferrer">new DOM3 renameNode method</a> (see <a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html" rel="noreferrer">also W3C</a>)
check if run at your bowser:     <a href="http://jsfiddle.net/k2jSm/1/" rel="noreferrer">http://jsfiddle.net/k2jSm/1/</a></p>

<p>So, a DOM solution is ugly and I not understand <strong>why (??) jQuery not implemented a workaround?</strong></p>

<h2>pure DOM algorithm</h2>

<ol>
<li><code>createElement(new_name)</code> </li>
<li>copy all content to new element; </li>
<li>replace old to new by <code>replaceChild()</code></li>
</ol>

<p>is something like this,</p>

<pre><code>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);
}
</code></pre>

<p>... wait review and jsfiddle ... </p>

<h2>jQuery algorithm</h2>

<p>The @ilpoldo algorithm is a good start point,</p>

<pre><code>   $from.replaceWith($('&lt;'+newname+'/&gt;').html($from.html()));
</code></pre>

<p>As others commented, it need a attribute copy ... wait generic ...</p>

<p>specific for <code>class</code>, <strong>preserving the attribute</strong>, see <a href="http://jsfiddle.net/cDgpS/" rel="noreferrer">http://jsfiddle.net/cDgpS/</a></p>

<p>See also <a href="https://stackoverflow.com/a/9468280/287948">https://stackoverflow.com/a/9468280/287948</a></p>


blocks|key|3029377|text|由于replaceWith()在元素基础上不适用于我(可能是因为我在map()中使用了它)，我通过创建一个新元素并根据需要复制属性来实现。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3029378|$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);|code-block|syntax|javascript|3029379|entityMap^0|2|D|Y|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>Since <code>replaceWith()</code> didn't work for me on an element basis (maybe because I used it inside <code>map()</code>), I did it by creating a new element and copying the attributes as needed.</p>

<pre><code>$items = $('select option').map(function(){

  var
    $source = $(this),
    $copy = $('&lt;li&gt;&lt;/li&gt;'),
    title = $source.text().replace( /this/, 'that' );

  $copy
    .data( 'additional_info' , $source.val() )
    .text(title);

  return $copy;
});

$('ul').append($items);
</code></pre>


blocks|key|300585|text|相信他说的话|type|unstyled|depth|inlineStyleRanges|entityRanges|data|300586|问题是“如何更改标签名称？”我建议这个解决方案：|300587|它是否有意义要视具体情况而定。|300588|我的例子将“重命名”所有带有超链接的a标签，用于带有span标签的SMS。维护所有属性和内容：|300589|$('a[href%5E="sms:"]').each(function(){
++var+$t=$(this);
++var+$new=$($t.wrap('<div>')
++++.parent()
++++++++.html()
++++++++.replace(/%5E\s*<\s*a/g,'<span')
++++++++.replace(/a\s*>\s*$/g,'span>')
++++++++).attr('href',+null);
++$t.unwrap().replaceWith($new);
});|code-block|syntax|javascript|300590|因为有一个带有href属性的span标记没有任何意义，所以我也删除了它。这样做是防弹的，并且与jquery支持的所有浏览器兼容。还有其他方法可以尝试将所有属性复制到新元素中，但这些方法并不适用于所有浏览器。|300591|虽然我认为这样做是相当昂贵的。|300592|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|V|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<h1>Take him by the word</h1>

<p>Taken the Question by Word "how to change tag name?" I would suggest this solution:<br>
If it makes sense or not has to be decided case by case.</p>

<p>My example will "rename" all a-Tags with hyperlinks for SMS with span tags. Maintaining all attributes and content:</p>

<pre><code>$('a[href^="sms:"]').each(function(){
  var $t=$(this);
  var $new=$($t.wrap('&lt;div&gt;')
    .parent()
        .html()
        .replace(/^\s*&lt;\s*a/g,'&lt;span')
        .replace(/a\s*&gt;\s*$/g,'span&gt;')
        ).attr('href', null);
  $t.unwrap().replaceWith($new);
});
</code></pre>

<p>As it does not make any sense to have a span tag with an href attribute I remove that too.
Doing it this way is bulletproof and compatible with all browsers that are supported by jquery.
There are other ways people try to copy all the Attributes to the new Element, but those are not compatible with all browsers.</p>

<p>Although I think it is quite expensive to do it this way.</p>


blocks|key|300600|text|JS更改标签名称|type|unstyled|depth|inlineStyleRanges|entityRanges|data|300601|/**
+*+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+=+'<'+%2B+replaceWith+%2B+attributes+%2B'>';
++++var+replacingEndTag+=+'</'+%2B+replaceWith+%2B+'>';
++++$(this).replaceWith(replacingStartTag+%2B+$(this).html()+%2B+replacingEndTag);
++});
}
replaceElem('div','span');

/**
+*+This+function+concats+the+attributes+of+old+elements
+*/
function+concatHashToString(hash){
++var+emptyStr+=+'';
++$.each(hash,+function(index){
++++emptyStr+%2B=+'+'+%2B+hash[index].name+%2B+'="'+%2B+hash[index].value+%2B+'"';
++});
++return+emptyStr;
}|code-block|syntax|javascript|300602|相关的小提琴在此link中|offset|length|300603|entityMap|0|LINK|mutability|MUTABLE|url|https://cbabhusal.wordpress.com/2015/01/04/dynamically-change-html-tag-of-elements/^0|0|0|8|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>JS to change the tag name</p>

<pre><code>/**
 * 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 = '&lt;' + replaceWith + attributes +'&gt;';
    var replacingEndTag = '&lt;/' + replaceWith + '&gt;';
    $(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;
}
</code></pre>

<p>Related fiddle is in this <a href="https://cbabhusal.wordpress.com/2015/01/04/dynamically-change-html-tag-of-elements/" rel="nofollow">link</a></p>


blocks|key|3243628|text|使"tagName“可编辑的Jquery插件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3243629|(function($){
++++var+$newTag+=+null;
++++$.fn.tagName+=+function(newTag){
++++++++this.each(function(i,+el){
++++++++++++var+$el+=+$(el);
++++++++++++$newTag+=+$("<"+%2B+newTag+%2B+">");

++++++++++++//+attributes
++++++++++++$.each(el.attributes,+function(i,+attribute){
++++++++++++++++$newTag.attr(attribute.nodeName,+attribute.nodeValue);
++++++++++++});
++++++++++++//+content
++++++++++++$newTag.html($el.html());

++++++++++++$el.replaceWith($newTag);
++++++++});
++++++++return+$newTag;
++++};
})(jQuery);|code-block|syntax|javascript|3243630|请参阅：http://jsfiddle.net/03gcnx9v/3/|offset|length|3243631|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/03gcnx9v/3/^0|0|0|4|V|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Jquery plugin to make "tagName" editable :</p>

<pre><code>(function($){
    var $newTag = null;
    $.fn.tagName = function(newTag){
        this.each(function(i, el){
            var $el = $(el);
            $newTag = $("&lt;" + newTag + "&gt;");

            // attributes
            $.each(el.attributes, function(i, attribute){
                $newTag.attr(attribute.nodeName, attribute.nodeValue);
            });
            // content
            $newTag.html($el.html());

            $el.replaceWith($newTag);
        });
        return $newTag;
    };
})(jQuery);
</code></pre>

<p>See : <a href="http://jsfiddle.net/03gcnx9v/3/" rel="nofollow">http://jsfiddle.net/03gcnx9v/3/</a></p>


blocks|key|3243643|text|上面的解决方案清除了现有的元素，并从头开始重新创建它，销毁了过程中对子元素的任何事件绑定。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3243644|简短回答：+(loses+'s+attributes)|offset|length|style|BOLD|3243645|$("p").wrapInner("<div/>").children(0).unwrap();|code-block|syntax|javascript|3243646|较长的答案：(副本的属性)|3243647|$("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();
});|3243648|fiddle+with+nested+bindings|3243649|同时从复制任何绑定都很酷，但getting+current+bindings对我不起作用。|3243650|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/rc296owo/3/|1|https://stackoverflow.com/questions/4138543/list-all-bindings-of-an-element-with-jquery^0|0|0|5|0|0|0|6|0|0|0|R|0|0|E|O|1|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@$D|16|E|17|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|19|8|@$D|1A|E|1B|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|1C|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1D|8|@]|9|@$D|1E|E|1F|1|1G]]|A|$]]|$1|S|3|T|5|6|7|1H|8|@]|9|@$D|1I|E|1J|1|1K]]|A|$]]|$1|U|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]|12|$5|X|Y|Z|A|$10|13]]]]

<p>The above solutions wipe out the existing element and re-create it from scratch, destroying any event bindings on children in the process.</p>

<p><strong>short answer:</strong> (loses 's attributes)</p>

<pre><code>$("p").wrapInner("&lt;div/&gt;").children(0).unwrap();
</code></pre>

<p><strong>longer answer:</strong> (copies 's attributes)</p>

<pre><code>$("p").each(function (o, elt) {
  var newElt = $("&lt;div class='p'/&gt;");
  Array.prototype.slice.call(elt.attributes).forEach(function(a) {
    newElt.attr(a.name, a.value);
  });
  $(elt).wrapInner(newElt).children(0).unwrap();
});
</code></pre>

<p><a href="http://jsfiddle.net/rc296owo/3/" rel="noreferrer">fiddle with nested bindings</a></p>

<p>It would be cool to copy any bindings from the  at the same time, but <a href="https://stackoverflow.com/questions/4138543/list-all-bindings-of-an-element-with-jquery">getting current bindings</a> didn't work for me.</p>


blocks|key|298215|text|还有另一个更改节点名称的脚本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|298216|function+switchElement()+{
++$element.each(function+(index,+oldElement)+{
++++let+$newElement+=+$('<'+%2B+nodeName+%2B+'/>');
++++_.each($element[0].attributes,+function(attribute)+{
++++++$newElement.attr(attribute.name,+attribute.value);
++++});
++++$element.wrapInner($newElement).children().first().unwrap();
++});
}|code-block|syntax|javascript|298217|http://jsfiddle.net/rc296owo/5/|offset|length|298218|它会将属性和内部html复制到一个新元素中，然后替换旧元素。|298219|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|V|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@$I|W|J|X|1|Y]]|A|$]]|$1|K|3|L|5|6|7|Z|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|H]]]]

<p>Yet another script to change the node name</p>

<pre><code>function switchElement() {
  $element.each(function (index, oldElement) {
    let $newElement = $('&lt;' + nodeName + '/&gt;');
    _.each($element[0].attributes, function(attribute) {
      $newElement.attr(attribute.name, attribute.value);
    });
    $element.wrapInner($newElement).children().first().unwrap();
  });
}
</code></pre>

<p><a href="http://jsfiddle.net/rc296owo/5/" rel="nofollow">http://jsfiddle.net/rc296owo/5/</a></p>

<p>It will copy over the attributes and inner html into a new element and then replace the old one.</p>


blocks|key|3029461|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3029462|$(function(){
++++$('#switch').bind('click',+function(){
++++++++$('p').each(function(){
++++++++	$(this).replaceWith($('<div/>').html($(this).html()));
++++++++});
++++});
});|code-block|syntax|javascript|3029463|p+{
++++background-color:+red;
}

div+{
++++background-color:+yellow;
}|3029464|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hello</p>
<p>Hello2</p>
<p>Hello3</p>
<button+id="switch">replace</button>|3029465|3029466|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|K|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
    $('#switch').bind('click', function(){
        $('p').each(function(){
        	$(this).replaceWith($('&lt;div/&gt;').html($(this).html()));
        });
    });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>p {
    background-color: red;
}

div {
    background-color: yellow;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;p&gt;Hello&lt;/p&gt;
&lt;p&gt;Hello2&lt;/p&gt;
&lt;p&gt;Hello3&lt;/p&gt;
&lt;button id="switch"&gt;replace&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|298229|text|您可以使用此函数|type|unstyled|depth|inlineStyleRanges|entityRanges|data|298230|var+renameTag++=+function+renameTag($obj,+new_tag)+{
++++var+obj+=+$obj.get(0);
++++var+tag+=+obj.tagName.toLowerCase();
++++var+tag_start+=+new+RegExp('%5E<'+%2B+tag);
++++var+tag_end+=+new+RegExp('<\\/'+%2B+tag+%2B+'>$');
++++var+new_html+=+obj.outerHTML.replace(tag_start,+"<"+%2B+new_tag).replace(tag_end,+'</'+%2B+new_tag+%2B+'>');
++++$obj.replaceWith(new_html);
};|code-block|syntax|javascript|298231|ES6|298232|const+renameTag+=+function+($obj,+new_tag)+{
++++let+obj+=+$obj.get(0);
++++let+tag+=+obj.tagName.toLowerCase();
++++let+tag_start+=+new+RegExp('%5E<'+%2B+tag);
++++let+tag_end+=+new+RegExp('<\\/'+%2B+tag+%2B+'>$');
++++let+new_html+=+obj.outerHTML.replace(tag_start,+"<"+%2B+new_tag).replace(tag_end,+'</'+%2B+new_tag+%2B+'>');
++++$obj.replaceWith(new_html);
};|298233|示例代码|298234|renameTag($(tr),'div');|298235|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>You can use this function </p>

<pre><code>var renameTag  = function renameTag($obj, new_tag) {
    var obj = $obj.get(0);
    var tag = obj.tagName.toLowerCase();
    var tag_start = new RegExp('^&lt;' + tag);
    var tag_end = new RegExp('&lt;\\/' + tag + '&gt;$');
    var new_html = obj.outerHTML.replace(tag_start, "&lt;" + new_tag).replace(tag_end, '&lt;/' + new_tag + '&gt;');
    $obj.replaceWith(new_html);
};
</code></pre>

<p>ES6</p>

<pre><code>const renameTag = function ($obj, new_tag) {
    let obj = $obj.get(0);
    let tag = obj.tagName.toLowerCase();
    let tag_start = new RegExp('^&lt;' + tag);
    let tag_end = new RegExp('&lt;\\/' + tag + '&gt;$');
    let new_html = obj.outerHTML.replace(tag_start, "&lt;" + new_tag).replace(tag_end, '&lt;/' + new_tag + '&gt;');
    $obj.replaceWith(new_html);
};
</code></pre>

<p>Sample code</p>

<pre><code>renameTag($(tr),'div');
</code></pre>


blocks|key|298244|text|受ericP+answer的启发，格式化并转换为jQuery插件：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|298245|$.fn.replaceWithTag+=+function(tagName)+{
++++var+result+=+[];
++++this.each(function()+{
++++++++var+newElem+=+$('<'+%2B+tagName+%2B+'>').get(0);
++++++++for+(var+i+=+0;+i+<+this.attributes.length;+i%2B%2B)+{
++++++++++++newElem.setAttribute(
++++++++++++++++this.attributes[i].name,+this.attributes[i].value
++++++++++++);
++++++++}
++++++++newElem+=+$(this).wrapInner(newElem).children(0).unwrap().get(0);
++++++++result.push(newElem);
++++});
++++return+$(result);
};|code-block|syntax|javascript|298246|用法：|298247|$('div').replaceWithTag('span')|298248|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/1243605/ericp^0|1|5|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>Inspired by <a href="https://stackoverflow.com/users/1243605/ericp">ericP</a> answer, formatted and converted to jQuery plugin:</p>

<pre><code>$.fn.replaceWithTag = function(tagName) {
    var result = [];
    this.each(function() {
        var newElem = $('&lt;' + tagName + '&gt;').get(0);
        for (var i = 0; i &lt; 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);
};
</code></pre>

<p>Usage:</p>

<pre><code>$('div').replaceWithTag('span')
</code></pre>


blocks|key|298254|text|工作的纯DOM算法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|298255|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;
}|code-block|syntax|javascript|298256|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Working pure DOM algorithm</p>

<pre><code>function rename_element(node, name) {
    let renamed = document.createElement(name);

    Array.from(node.attributes).forEach(attr =&gt; {
        renamed.setAttribute(attr.name, attr.value);        
    })
    while (node.firstChild) {
        renamed.appendChild(node.firstChild);
    }
    node.parentNode.replaceChild(renamed, node);
    return renamed;
}

</code></pre>


blocks|key|3243809|text|也试试这个吧。在本例中，我们还可以在新标记中包含旧标记的属性|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3243810|​|3243811|var+newName+=+document.querySelector('.test').outerHTML.replaceAll('h1',+'h2');
document.querySelector('.test').outerHTML+=+newName;|code-block|syntax|javascript|3243812|<h1+class="test">Replace+H1+to+H2</h1>|3243813|3243814|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p><em>Try this one also. in this example we can also have attributes of the old tag in new tag</em></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var newName = document.querySelector('.test').outerHTML.replaceAll('h1', 'h2');
document.querySelector('.test').outerHTML = newName;</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1 class="test"&gt;Replace H1 to H2&lt;/h1&gt;</code></pre>
</div>
</div>
</p>


<p>jQuery: how to change tag name?</p>

<p>For example:</p>

<pre><code>&lt;tr&gt;
    $1
&lt;/tr&gt;
</code></pre>

<p>I need</p>

<pre><code>&lt;div&gt;
    $1
&lt;/div&gt;
</code></pre>

<p>Yes, I can</p>

<ol>
<li>Create DOM element &lt;div></li>
<li>Copy tr content to div</li>
<li>Remove tr from dom</li>
</ol>

<p>But can I make it directly?</p>

<p>PS:</p>

<pre><code>    $(tr).get(0).tagName = "div"; 
</code></pre>

<p>results in <code>DOMException</code>.</p>


jQuery: how to change tag name?

jQuery

jQuery:如何更改标签名称？例如：<tr>    $1</tr>我需要<div>    $1</div>是的，我会创建DOM元素将tr内容复制到div从dom中删除tr但是我可以直接做吗？PS：    $(tr).get(0).tagName = "div"; 结果为DOMException。

问jQuery:如何更改标签名称？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery:如何更改标签名称？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery:如何更改标签名称？
EN