Question

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

    <span>some text</span>

我想将其更改为

  <div>some text</div>

我不知道该怎么做。

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

Answer 2

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

$('span').each(function() {

  $(this).replaceWith($('<div>' + this.innerHTML + '</div>'));

});

这是有效的DEMO

Answer 3

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

Answer 4

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

Answer 5

如果使用jquery

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

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

Answer 6

假设：您要替换的范围包含在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。

使用javascript更改标记

6 个答案: