42

我想知道如何用这样的纯 javascript 更改标签

    <span>some text</span>

我想把它改成那个

  <div>some text</div>

我不知道该怎么做。

4

6 回答 6

84

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

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/

于 2012-11-15T00:34:16.747 回答
5

刚刚为此编写了一个 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保留了原始元素的所有属性。

于 2015-08-18T08:30:07.303 回答
1

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

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

这是一个 JSFIDDLE 工作演示

于 2012-11-15T00:33:40.417 回答
-1

你不能这样做。您要做的是获取您的内容span，然后将其删除并创建新div内容并用以前的内容填充它。

于 2012-11-15T00:34:28.020 回答
-1

假设：您要替换的跨度被包装在 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;

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

于 2012-11-15T00:42:30.560 回答
-2

如果使用 jquery

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

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

于 2012-11-15T00:31:42.910 回答