使用javascript更改标记

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 插件。

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

如果使用jquery

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

请注意，这只适用于只有一个跨度的情况，否则请使用 id 选择器