jQuery：如何更改标签名称？

Question

jQuery：如何更改标签名称？

例如：

<tr>
    $1
</tr>

我需要

<div>
    $1
</div>

是的，我可以

1. 创建 DOM 元素
   ;
2. 将tr内容复制到div中
3. 从dom中删除tr

但是我可以直接制作吗？

PS：

    $(tr).get(0).tagName = "div"; 

导致 DOMException。

Answer 1

您可以使用 jQuery 的 .replaceWith() 方法替换任何 HTML 标记。

示例： http://jsfiddle.net/JHmaV/

参考： .replaceWith

如果您想保留现有标记，您可以使用如下代码：

$('#target').replaceWith('<newTag>' + $('#target').html() +'</newTag>')

Answer 2

不，根据 W3C 规范，这是不可能的：“tagName of type DOMString, readonly”

http://www.w3.org/TR/DOM-Level-2-Core/core.html

Answer 3

上述解决方案会清除现有元素并从头开始重新创建它，从而破坏进程中子元素上的任何事件绑定。

简短答案：（丢失

的属性）

$("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();
});

摆弄嵌套绑定

同时复制任何绑定会很酷，但是 获取当前绑定对我来说不起作用。

Answer 4

DOM renameNode() 方法在哪里？

今天（2014 年）没有浏览器理解新的 DOM3 renameNode 方法（请参阅还有 W3C)
检查是否在您的 Bowser 上运行： http://jsfiddle.net/k2jSm/1/

所以， DOM 解决方案很丑陋，我不明白为什么 (??) jQuery 没有实现解决方法？

纯 DOM 算法

1. createElement(new_name)
2. 将所有内容复制到新元素；
3. 通过 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 ...

jQuery 算法

@ilpoldo 算法是一个很好的起点，

   $from.replaceWith($('<'+newname+'/>').html($from.html()));

正如其他人评论的那样，它需要一个属性复制...等待通用...

特定于class，保留属性，请参阅http://jsfiddle.net/cDgpS/

另请参阅https://stackoverflow.com/a/ 9468280/287948

Answer 5

要保留标签的内部内容，您可以将访问器 .html() 与 .replaceWith()

分叉示例结合使用：http://jsfiddle.net/WVb2Q/1/

Answer 6

受到 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')

Answer 7

工作纯 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;
}

Answer 8

你可以先学一点基础知识。对我有用。

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;

Answer 9

要替换多个标签的内部内容，每个标签都有自己的原始内容，您必须使用.replaceWith()和.html()不同的是：

http://jsfiddle.net/kcrca/VYxxG/

Answer 10

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;
}

相关小提琴在此 链接

Answer 11

你可以使用这个函数

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 + '>
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 + '>
示例代码
renameTag($(tr),'div');

);
    var new_html = obj.outerHTML.replace(tag_start, "<" + new_tag).replace(tag_end, '</' + new_tag + '>');
    $obj.replaceWith(new_html);
};

ES6

示例代码

);
    let new_html = obj.outerHTML.replace(tag_start, "<" + new_tag).replace(tag_end, '</' + new_tag + '>');
    $obj.replaceWith(new_html);
};

示例代码

); var new_html = obj.outerHTML.replace(tag_start, "<" + new_tag).replace(tag_end, '</' + new_tag + '>'); $obj.replaceWith(new_html); };

ES6

示例代码

Answer 12

由于 replaceWith() 在元素基础上对我不起作用（可能是因为我在 map() 中使用了它），所以我通过创建一个新元素并复制来做到这一点根据需要添加属性。

$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);

Answer 13

就拿他来说吧，

就拿问题来说，“如何更改标签名称？”我建议这个解决方案：
是否合理，需要具体情况具体分析。

我的示例将“重命名”所有带有超链接的 a-标签，用于带有跨度标签的短信。维护所有属性和内容：

$('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 支持的所有浏览器兼容。
人们还有其他方法尝试将所有属性复制到新元素，但这些方法并不与所有浏览器兼容。

虽然我认为这样做的成本相当高。

Answer 14

Jquery 插件使“tagName”可编辑：

(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);

请参阅：http://jsfiddle.net/03gcnx9v/3/

Answer 15

另一个更改节点名称的脚本

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 复制到新元素中，然后替换旧元素。

Answer 16

$(function(){
    $('#switch').bind('click', function(){
        $('p').each(function(){
        	$(this).replaceWith($('<div/>').html($(this).html()));
        });
    });
});

p {
    background-color: red;
}

div {
    background-color: yellow;
}

<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>

Answer 17

也试试这个。在这个例子中，我们还可以在新标签中拥有旧标签的属性

var newName = document.querySelector('.test').outerHTML.replaceAll('h1', 'h2');
document.querySelector('.test').outerHTML = newName;

<h1 class="test">Replace H1 to H2</h1>

Answer 18

假设您启用了 jQuery

1. 获取 DOM 的 Html 代码。
2. 替换 Html-code 中的 TAG
3. 将 Html-code 转换为 DOM

这里是示例代码，
它很丑，但是工作，哈哈。

DOM_old = $('<td>contents</td>');
temp = DOM_old[0].outerHTML;
temp = temp.replace('<td', '<div');
temp = temp.replace('</td>', '</div>');
DOM_new = $(temp);

Answer 19

由于接受的答案有一些限制（例如属性不会迁移到新元素），我找到了一种新方法来替换标签名称而不丢失这些属性。但它也有一些限制，例如：为主元素设置的事件不会迁移到新元素。无论如何，我提供了该功能。如果您有更好的想法，请告诉我。

使用纯 Javascript：

function replaceTag(element, new_tag) {
  let outerHTML = element.outerHTML;
  let outerTag = outerHTML
    .match(/<([a-zA-Z]*?)( |>)/)[0]
    .replaceAll("<", "")
    .replaceAll("/", "")
    .replaceAll("=", "")
    .replaceAll(">", "")
    .trim();
  let newHTML_pre = outerHTML.replace(outerTag, new_tag);
  newHTML_pre = newHTML_pre.slice(0, newHTML_pre.length - outerTag.length - 3);
  let newHTML;
  if (outerHTML.endsWith('</' + outerTag + '>')) {
    newHTML = newHTML_pre + '</' + new_tag + '>';
  } else {
    newHTML = newHTML_pre;
  }
  element.outerHTML = newHTML;
}
// let e = document.querySelector('div');
// replaceTag(e, 'img');

使用 Jquery：

$.fn.replaceTag = function (new_tag) {
  return this.each(function () {
    let outerHTML = $(this).prop("outerHTML");
    let outerTag = outerHTML
      .match(/<([a-zA-Z]*?)( |>)/)[0]
      .replaceAll("<", "")
      .replaceAll("/", "")
      .replaceAll("=", "")
      .replaceAll(">", "")
      .trim();
    let newHTML_pre = outerHTML.replace(outerTag, new_tag);
    newHTML_pre = newHTML_pre.slice(0, newHTML_pre.length - outerTag.length - 3);
    let newHTML;
    if (outerHTML.endsWith("</" + outerTag + ">")) {
      newHTML = newHTML_pre + "</" + new_tag + ">";
    } else {
      newHTML = newHTML_pre;
    }
    $(this).prop("outerHTML", newHTML);
  });
};
// $('div').replaceTag('img');

说明：

该函数用新标签替换元素的outerHTML 的开始和结束标签，忽略具有相同标签名称的子元素。有时，元素没有结束标记名称，例如：(

)，在这种情况下，它只是替换开始标记。就这样。