javascript - 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 が受け入れられる場合は、replaceWith を使用します。

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

これは JSFIDDLE の動作するDEMOです。

Answer 4

あなたはそれをすることはできません。あなたがしたいことは、あなたのコンテンツを取得しspan、それを削除して新しく作成divし、以前のコンテンツで埋めることです。

Answer 5

前提: 置き換えたいスパンは、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 を使用することです。

Answer 6

jqueryを使う場合

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

これはスパンが 1 つしかない場合にのみ機能することに注意してください。それ以外の場合は ID セレクターを使用してください。