Hoe voeg ek 'n pre tag binne 'n kode tag met jQuery?

Question

Ek probeer om jQuery gebruik om kode blokke formaat, spesifiek na 'n <pre> tag binne die <code> tag voeg:

$(document).ready(function() {
   $("code").wrapInner("<pre></pre>");
});

Firefox geld die uitleg korrek, maar Internet Explorer sit die hele kode blok op een lyn. As ek voeg 'n waarskuwing

alert($("code").html());

Ek sien dat IE 'n paar ekstra teks in die pre tag het bygevoeg:

<PRE jQuery1218834632572="null">

As ek herlaai die bladsy, die aantal volgende jQuery veranderinge.

As ek wrap() in plaas van wrapInner(), om die <pre> draai buite die <code> tag, beide van Internet Explorer en Firefox hanteer dit korrek. Maar moet nie <pre> werk binnekant <code> sowel?

Ek sou verkies om wrapInner() gebruik, want ek kan dan voeg 'n CSS klas aan die <pre> tag om al opmaak hanteer, maar as ek gebruik wrap(), ek het na bladsy opmaak CSS sit in die <pre> tag en teks / font opmaak in die <code> tag, of Firefox en Internet Explorer beide verstik. Nie 'n groot deal, maar ek wil dit so eenvoudig as moontlik te hou.

Het iemand anders dit teëgekom? Mis ek iets?

Answer 1

Dit is die verskil tussen blok en inline elemente. pre is 'n blok vlak element . Dit is nie reg om dit binne 'n code tag, wat kan sit bevat net inline inhoud .

As gevolg blaaier moet ondersteun ongeag godawful tag sop hulle kon vind op die werklike web, Firefox probeer om te doen wat jy bedoel. IE gebeur om dit anders te hanteer, wat is goed deur die spec; gedrag in so 'n geval is ongespesifiseerde, omdat dit nooit sou gebeur.

• Kan jy plaas vervang die code element met die pre? (As gevolg van die blok / inline kwessie, tegnies dat net moet werk as die elemente is in 'n element met" vloei "inhoud , maar die blaaier kan doen wat jy wil in elk geval.)
• Hoekom is dit 'n code element in die eerste plek, as jy gedrag pre se wil?
• Jy kan ook witspasie die behoud van krag die code element pre se gee met die CSS white-space: pre , maar blykbaar Internet Explorer 6 eer net dat in Streng af .

Answer 2

Btw Ek weet nie of dit is wat verband hou maar pre tags binne kode tags sal nie bekragtig in streng af.

Answer 3

Is jy met behulp van die nuutste jQuery? Wat gebeur as jy probeer

$("code").wrapInner(document.createElement("pre"));

Is dit nie beter of jy dieselfde resultaat te kry?

Answer 4

As markpasc gestel, 'n pre element binne KODE element word nie toegelaat in HTML. Die beste oplossing is om jou HTML-kode te verander om te gebruik

  (wat beteken 'n vooraf opgemaakte blok wat kode bevat) in jou HTML direk vir kode blokke. 
	

Answer 5

Jy kan html gebruik () om dit toe te draai:

$('code').each(function(i,e)
{
    var self = $(e);
    self.html('<pre>' + self.html() + '</pre>');
});

Soos hierbo genoem, jy beter af die verandering van jou html wees. Maar hierdie oplossing moet werk.