2013-04-29 15 views
6

私は作業しているサイトを持っており、IE5がHTML5 Shivを使っていても何も試してもIE8を読むことができなくなってしまう「脇に」タグを使用しています。だから、どうやって既存のタグを他のタグでjQueryに置き換えるのでしょうか?例えばjqueryのHTMLタグを別のタグに置き換えるにはどうすればよいですか?

は、私は

<div> 
    <h3></h3> 
</div> 

<aside> 
    <h3></h3> 
</aside> 

を変更したい場合はどのように行われるのでしょうか?

+0

タグを置き換えることによって、達成するために何をしようとしていますか? –

+2

'document.createElement( 'aside')'はIE8のasideタグで作業できるようにするべきです。 html5 doctypeを使用していますか? –

+0

.replaceWith( 'tag_here'); – Memolition

答えて

26

これを試してみてください:

$('aside').contents().unwrap().wrap('<div/>'); 
  • が最初asideの内容を取得します。
  • 今やunwrapの内容です。
  • 今すぐwrap新しいタグ内の内容、ここではdivです。

DEMO


また、あなたは次のように使用してこれ.replaceWith()方法を行うことができます。これは、仕事をする

$('aside').replaceWith(function() { 
    return $('<div/>', { 
     html: $(this).html() 
    }); 
}); 

DEMO

+0

これは完全に機能します!どうもありがとう。 –

+1

これは、 '.contents'を使用しているときにテキストノード(空白)が含まれているため、間違って' div'を作成します。http://tinker.io/493db/1を参照してください。 – Nelson

+0

これを試してみると、 IE8:http://jsfiddle.net/JpzhL/2/embedded/result/ –

7
$('aside').replaceWith('<div><h3></h3></div>'); 
+0

この解決策も同様に動作します。 –

1

$('aside').replaceWith("<div>" + $('aside').html() + "</div>"); 

また、.html()を使用すると、より動的なアプローチが得られます。

3

これはドキュメント内のすべての要素に対して機能し、内容を保持します。ラップを使用すると、aside要素の内容に改行がある場合、多くのdiv要素の出現につながります。

$('aside').each(function() { $(this).replaceWith("<div>"+$(this).html()+"</div>") });

0

ここでHTML5のタグを置き換えるのdivのスタイルを維持し、HTML5のブロックタグを置き換えるソリューションです。単にタグを置き換えるだけで、属性が後ろに残されます。

$('article, aside, figcaption, figure, footer, header, nav, section, source') 
    .each(function(){ 
     var el = $(this), 
      html = el.html(), 
      attrs = { 
       "id": el.attr('id'), 
       "classes": el.attr('class'), 
       "styles": el.attr('style') 
      }; 

     console.log('Replacing ' + el.prop('tagName') + ', classes: ' + attrs.classes); 
     el.replaceWith($('<div></div>').html(html).attr(attrs)); 
    }); 

(「SRC」を持ち、「タイプ」は、ソース属性タグ、上もう少し作業が必要になる場合があります)

関連する問題