使用JavaScript更改标签

Question

我想知道怎么用纯 JavaScript 改变一个标签。

    <span>some text</span>

我希望将其更改为那样

  <div>some text</div>

我不知道如何做到这一点。

- user1801625

---

你想要纯JavaScript的答案还是你正在使用jQuery？ - davidethell

你想要替换所有的<span>标签还是只是特定的一个？ - JohnFx

http://stackoverflow.com/questions/1170970/change-all-span-tags-into-label-tags-with-javascript - Drew Dahlman

看这里，如果你能使用jQuery的话，这很容易做到 -> http://jsfiddle.net/JHmaV/ - David Müller

我想用纯 JavaScript 实现，并且我需要一个具体的实现，谢谢！由于我不知道如何实现，所以我还没有尝试过任何东西。 - user1801625

这是一个合理的问题。为什么会有负评？ - julienfr112

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/

- Guffa

---

@Guffa：e.parentNode.replaceChild(d, e);，但是 +1 ；-) - I Hate Lazy

@IHateLazy @bdkopen 为什么 insertBefore() 和 removeChild() 是错误的？ - Shayan

我意识到原问题并没有要求这个，但是这个并不带任何属性。换句话说，如果原始的HTML是<span class="foo">bar</span>，它仍然会生成结果HTML <div>bar</div>。 - Loko Web Design

1行版本：document.querySelectorAll(".yuRUbf a").forEach(e=>e.parentNode.replaceChild(Object.assign(document.createElement("div"),{innerHTML:e.innerHTML}),e)); - Ninh Pham

@Cloud：replaceWith方法比replaceChild更近期添加。请检查支持信息，以确定它是否存在于您需要支持的浏览器版本中。 - Guffa

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

这种方法的最大优点是保留了原始元素的所有属性。

- Juribiyan

---

他明确要求一个“纯JavaScript”的答案。 - Neithan Max

Answer 3

如果可以使用jQuery，则使用replaceWith。

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

这里有一个JSFIDDLE工作的演示

- Gurpreet Singh

---

或者不使用jQuery并稍微改变大小写：http://jsfiddle.net/CvRq2/ - kieran

他要求一个纯JavaScript的答案。 - Parsa Yazdani

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

如果您无法保证该跨度被一个元素紧密包裹（可以通过ID或其他方式进行一致获取），那么JavaScript会变得相当复杂。无论哪种情况，真正的答案是：使用jQuery。

- Abraham P

---

这种方法会产生各种副作用。而且，在这种情况下使用正则表达式是昂贵的，也是一个糟糕的用例。 - Hybrid web dev

糟糕的使用案例是怎样的？有哪些副作用？你应该详细阐述，以免浪费人们读一些有用的东西的时间。 - osirisgothra

Answer 5

如果使用jQuery

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

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

- Jay Rizzi

---

@bluejayke https://jsfiddle.net/barney/kDjuf/ - VeteranLK

Answer 6

你不能这样做。 你想要做的是获取你的标签的内容， 然后删除它并创建一个新的

标签，并用之前的内容填充它。

- tonino.j