使用javascript更改标签[重复]答案

【问题标题】：Change tag using javascript [duplicate]使用javascript更改标签[重复]
【发布时间】：2012-11-15 00:25:37
【问题描述】：

我想知道如何使用纯 javascript 更改标签

    <span>some text</span>

我想改成那个

  <div>some text</div>

我不知道该怎么做。

【问题讨论】：

您是想要纯 Javascript 的答案还是使用 jQuery？
另外，您想替换所有标签实例还是仅替换一个特定实例？
看这里，用 jQuery 做起来很简单（如果你会用的话）-> jsfiddle.net/JHmaV
我想知道纯javascript，我想要一个具体的谢谢！我什么都没试过，因为我不知道该怎么做。
这是一个合理的问题。为什么投反对票？

标签： javascript html

【解决方案1】：

您不能像那样更改元素的类型，而是必须创建一个新元素并将内容移入其中。示例：

var e = document.getElementsByTagName('span')[0];

var d = document.createElement('div');
d.innerHTML = e.innerHTML;

e.parentNode.replaceChild(d, e);

演示：http://jsfiddle.net/Guffa/bhnWR/

【讨论】：

@Guffa: e.parentNode.replaceChild(d, e); 但 +1 ;-)
@IHateLazy @bdkopen 为什么insertBeofre() 和removeChild() 错了？
我意识到最初的问题并没有要求这个，但这并没有任何属性。换句话说，如果原始 HTML 是 <span class="foo">bar</span>，它仍然会生成结果 HTML <div>bar</div>。
1行版本：document.querySelectorAll(".yuRUbf a").forEach(e=>e.parentNode.replaceChild(Object.assign(document.createElement("div"),{innerHTML:e.innerHTML}),e));
而不是父级上的replaceChild，我更喜欢直接replaceWith

【解决方案2】：

刚刚为此编写了一个 jQuery 插件。

(function( $ ) {
  $.fn.replaceTag = function(newTag) {
    var originalElement = this[0]
    , originalTag = originalElement.tagName
    , startRX = new RegExp('^<'+originalTag, 'i')
    , endRX = new RegExp(originalTag+'>$', 'i')
    , startSubst = '<'+newTag
    , endSubst = newTag+'>'
    , newHTML = originalElement.outerHTML
    .replace(startRX, startSubst)
    .replace(endRX, endSubst);
    this.replaceWith(newHTML);
  };
})(jQuery);

用法：

$('div#toChange').replaceTag('span')

这种方式最大的好处是id保留了原元素的所有属性。

【讨论】：

他明确要求提供“纯 JavaScript”的答案。

【解决方案3】：

如果 jquery 可以接受，请使用 replaceWith。

$('span').each(function() {
    
  $(this).replaceWith($('<div>' + this.innerHTML + '</div>'));
 
});

这是一个工作的 JSFIDDLE DEMO

【讨论】：

或者没有 jquery 并且在稍微不同的情况下：jsfiddle.net/CvRq2

【解决方案4】：

假设：您要替换的跨度被包装在一个 id 为“foo”的 div 中

在纯 JavaScript 中，您可以执行以下操作：

 var original_html = document.getElementById('foo').innerHTML;

 original_html = original_html.replace("<span>", "<div>");

 original_html = original_html.replace(new RegExp("</span>"+$), "</div">)
 document.getElementById('foo').innerHTML=original_html;

但是，如果您不一定期望 span 被您可以始终获得的元素（通过 id 或其他方式）紧密包裹，则 javascript 会变得相当复杂。无论哪种情况，真正的答案是：使用 jQuery。

【讨论】：

这种方法会产生各种副作用。此外，使用正则表达式很昂贵，在这种情况下是一个糟糕的用例。

【解决方案5】：

如果使用 jquery

 Var spantxt = $('span').text();
 $('body').append('<div>'+spantext+'</div');

请注意，这仅在只有一个跨度时才有效，否则使用 id 选择器

【讨论】：

@bluejayke jsfiddle.net/barney/kDjuf

【解决方案6】：

你做不到。你想要做的是把你的span的内容，然后删除它并创建新的div 并用以前的内容填充它。

【讨论】：