innerXHTML

Har lite trubbel med det icke standardiserade Element.innerHTML. Grunden i mitt problem är att innerHTML returnerar just html och inte xhtml, trots att jag använder en xhtml-doctype, samt att koden från början dessutom är korrekt xhtml.

Finns det någon vis person som har något att yttra sig om kring detta? Några tips från ärrade personer i detta ämne?

Jag har testat med innerXHTML av Steve Tucker, men det når inte ända vägen fram för min del. Dels så läggs det till en massa skräp i vissa taggar när man kör IE, och sen är redan min svg-bild förstörd av innerHTML innan innerXHTML får chansen att göra sitt.

Källkoden:

<h1>Rubrik</h1>
<p class="myClass">Ett stycke text</p>
<hr/>
<p class="myClass myOtherClass" id="myId">Ett till stycke text</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<svg:svg style="width:43mm;" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" width="210.972" height="39.28" viewBox="0 0 210.972 39.28" xml:space="preserve">
    <svg:g>
        <svg:g id="Lager_1">
            <svg:path d="M18.662,24.006c-0.045-1.368,0.184-2.745,0.748-4.072c1.861-4.045,5.404-5.561,7.825-6.036 c2.717-0.637,4.72-0.063,4.72-0.063l2.624,4.576c-3.707-1.9-7.872-1.944-11.62-0.062c-1.92,1.061-3.754,3.294-3.833,5.613 L18.662,24.006z" />
            <svg:path d="M1.896,31.715c3.163,3.537,7.909,5.403,12.751,4.233c3.251-0.72,6.154-2.694,8.488-5.045l0.401,0.334 c-4.769,5.287-11.899,9.271-19.125,6.576C2.791,37.217,1.255,36.319,0,35.099L1.896,31.715z" />
            <svg:path d="M23.286,27.235c-1.148,0.745-2.446,1.26-3.874,1.458c-4.425,0.492-7.552-1.761-9.208-3.59 c-1.945-2-2.488-4.012-2.488-4.012l2.568-4.606c0.284,4.156,2.394,7.747,5.939,9.986c1.899,1.099,4.759,1.517,6.787,0.389 L23.286,27.235z" />
        </svg:g>
    </svg:g>
</svg:svg>

innerHTML Firefox:

<h1>Rubrik</h1>
<p class="myClass">Ett stycke text</p>
<hr>
<p class="myClass myOtherClass" id="myId">Ett till stycke text</p>
<br>
<br>
<br>
<br>
<br>
<br>
<svg:svg style="width: 43mm;" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" width="210.972" height="39.28" viewbox="0 0 210.972 39.28" xml:space="preserve">
    <svg:g>
        <svg:g id="Lager_1">
            <svg:path d="M18.662,24.006c-0.045-1.368,0.184-2.745,0.748-4.072c1.861-4.045,5.404-5.561,7.825-6.036 c2.717-0.637,4.72-0.063,4.72-0.063l2.624,4.576c-3.707-1.9-7.872-1.944-11.62-0.062c-1.92,1.061-3.754,3.294-3.833,5.613 L18.662,24.006z">
            <svg:path d="M1.896,31.715c3.163,3.537,7.909,5.403,12.751,4.233c3.251-0.72,6.154-2.694,8.488-5.045l0.401,0.334 c-4.769,5.287-11.899,9.271-19.125,6.576C2.791,37.217,1.255,36.319,0,35.099L1.896,31.715z">
            <svg:path d="M23.286,27.235c-1.148,0.745-2.446,1.26-3.874,1.458c-4.425,0.492-7.552-1.761-9.208-3.59 c-1.945-2-2.488-4.012-2.488-4.012l2.568-4.606c0.284,4.156,2.394,7.747,5.939,9.986c1.899,1.099,4.759,1.517,6.787,0.389 L23.286,27.235z">
        </svg:path>
    </svg:path>
</svg:path>
</svg:g></svg:g></svg:svg>

innerHTML IE7:

<H1>Rubrik</H1>
<P class=myClass>Ett stycke text</P>
<HR>

<P class="myClass myOtherClass" id=myId>Ett till stycke text</P><BR><BR><BR><BR><BR><BR><SVG:SVG style="WIDTH: 43mm" xml:space="preserve" viewBox="0 0 210.972 39.28" height="39.28" width="210.972" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svg="http://www.w3.org/2000/svg" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns:x="http://ns.adobe.com/Extensibility/1.0/"><SVG:G><SVG:G id=Lager_1><SVG:PATH d="M18.662,24.006c-0.045-1.368,0.184-2.745,0.748-4.072c1.861-4.045,5.404-5.561,7.825-6.036 c2.717-0.637,4.72-0.063,4.72-0.063l2.624,4.576c-3.707-1.9-7.872-1.944-11.62-0.062c-1.92,1.061-3.754,3.294-3.833,5.613 L18.662,24.006z" /><SVG:PATH d="M1.896,31.715c3.163,3.537,7.909,5.403,12.751,4.233c3.251-0.72,6.154-2.694,8.488-5.045l0.401,0.334 c-4.769,5.287-11.899,9.271-19.125,6.576C2.791,37.217,1.255,36.319,0,35.099L1.896,31.715z" /><SVG:PATH d="M23.286,27.235c-1.148,0.745-2.446,1.26-3.874,1.458c-4.425,0.492-7.552-1.761-9.208-3.59 c-1.945-2-2.488-4.012-2.488-4.012l2.568-4.606c0.284,4.156,2.394,7.747,5.939,9.986c1.899,1.099,4.759,1.517,6.787,0.389 L23.286,27.235z" /></SVG:G></SVG:G></SVG:SVG>

innerXHTML Firefox:

<h1>Rubrik</h1>
<p class="myClass">Ett stycke text</p>
<hr></hr>
<p id="myId" class="myClass myOtherClass">Ett till stycke text</p>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<svg:svg xml:space="preserve" viewbox="0 0 210.972 39.28" height="39.28" width="210.972" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svg="http://www.w3.org/2000/svg" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" style="width: 43mm;">
    <svg:g>
        <svg:g id="Lager_1">
            <svg:path d="M18.662,24.006c-0.045-1.368,0.184-2.745,0.748-4.072c1.861-4.045,5.404-5.561,7.825-6.036 c2.717-0.637,4.72-0.063,4.72-0.063l2.624,4.576c-3.707-1.9-7.872-1.944-11.62-0.062c-1.92,1.061-3.754,3.294-3.833,5.613 L18.662,24.006z">
            <svg:path d="M1.896,31.715c3.163,3.537,7.909,5.403,12.751,4.233c3.251-0.72,6.154-2.694,8.488-5.045l0.401,0.334 c-4.769,5.287-11.899,9.271-19.125,6.576C2.791,37.217,1.255,36.319,0,35.099L1.896,31.715z">
            <svg:path d="M23.286,27.235c-1.148,0.745-2.446,1.26-3.874,1.458c-4.425,0.492-7.552-1.761-9.208-3.59 c-1.945-2-2.488-4.012-2.488-4.012l2.568-4.606c0.284,4.156,2.394,7.747,5.939,9.986c1.899,1.099,4.759,1.517,6.787,0.389 L23.286,27.235z">
        </svg:path>
    </svg:path>
</svg:path>
</svg:g></svg:g></svg:svg>

innerXHTML IE7:

<h1>Rubrik</h1><p class="myClass">Ett stycke text</p><hr></hr><p class="myClass myOtherClass" id="myId">Ett till stycke text</p><br></br><br></br><br></br><br></br><br></br><br></br><svg:svg style="width: 43mm" xml:space="preserve" viewbox="0 0 210.972 39.28" height="39.28" width="210.972" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svg="http://www.w3.org/2000/svg" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns:x="http://ns.adobe.com/Extensibility/1.0/"></svg:svg><svg:g></svg:g><svg:g id="Lager_1"></svg:g><svg:path d="M18.662,24.006c-0.045-1.368,0.184-2.745,0.748-4.072c1.861-4.045,5.404-5.561,7.825-6.036 c2.717-0.637,4.72-0.063,4.72-0.063l2.624,4.576c-3.707-1.9-7.872-1.944-11.62-0.062c-1.92,1.061-3.754,3.294-3.833,5.613 L18.662,24.006z"></svg:path><svg:path d="M1.896,31.715c3.163,3.537,7.909,5.403,12.751,4.233c3.251-0.72,6.154-2.694,8.488-5.045l0.401,0.334 c-4.769,5.287-11.899,9.271-19.125,6.576C2.791,37.217,1.255,36.319,0,35.099L1.896,31.715z"></svg:path><svg:path d="M23.286,27.235c-1.148,0.745-2.446,1.26-3.874,1.458c-4.425,0.492-7.552-1.761-9.208-3.59 c-1.945-2-2.488-4.012-2.488-4.012l2.568-4.606c0.284,4.156,2.394,7.747,5.939,9.986c1.899,1.099,4.759,1.517,6.787,0.389 L23.286,27.235z"></svg:path></svg:g><//svg:g></svg:g><//svg:g></svg:svg><//svg:svg>

Här är html-dokumentet jag testar med:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<script type="text/javascript" src="innerxhtml.js"></script>
<script type="text/javascript">
	function doTheHtmlThing() {
		alert(document.getElementById('myDiv').innerHTML);
	}
	function doTheXhtmlThing() {
		alert(innerXHTML(document.getElementById('myDiv')));
	}
</script>
</head>
<body>
<div>
<input type="button" value="Do the HTML thing" onclick="doTheHtmlThing()"/>
<input type="button" value="Do the XHTML thing" onclick="doTheXhtmlThing()"/>
</div>
<div id="myDiv">
<h1>Rubrik</h1>
<p class="myClass">Ett stycke text</p>
<hr/>
<p class="myClass myOtherClass" id="myId">Ett till stycke text</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<svg:svg style="width:43mm;" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" width="210.972" height="39.28" viewBox="0 0 210.972 39.28" xml:space="preserve">
    <svg:g>
        <svg:g id="Lager_1">
            <svg:path d="M18.662,24.006c-0.045-1.368,0.184-2.745,0.748-4.072c1.861-4.045,5.404-5.561,7.825-6.036 c2.717-0.637,4.72-0.063,4.72-0.063l2.624,4.576c-3.707-1.9-7.872-1.944-11.62-0.062c-1.92,1.061-3.754,3.294-3.833,5.613 L18.662,24.006z" />
            <svg:path d="M1.896,31.715c3.163,3.537,7.909,5.403,12.751,4.233c3.251-0.72,6.154-2.694,8.488-5.045l0.401,0.334 c-4.769,5.287-11.899,9.271-19.125,6.576C2.791,37.217,1.255,36.319,0,35.099L1.896,31.715z" />
            <svg:path d="M23.286,27.235c-1.148,0.745-2.446,1.26-3.874,1.458c-4.425,0.492-7.552-1.761-9.208-3.59 c-1.945-2-2.488-4.012-2.488-4.012l2.568-4.606c0.284,4.156,2.394,7.747,5.939,9.986c1.899,1.099,4.759,1.517,6.787,0.389 L23.286,27.235z" />
        </svg:g>
    </svg:g>
</svg:svg>
</div>
</body>
</html>

Två frågor:

1. Vad gör skräpet för skada?
2. Varför vill du använda inner(X)HTML öht? Var är det du itne kan gör genom DOM?

innerHTML är inte skapat för XML. Så länge som du måste kunna skicka din sida som text/html så ÄR den inte XHTML. Webbläsrens DOM-hantering är HTML och inte XHTML oavsett Doctype.

Din Doctype fyller bara två funktioner:
1. Den anger syntax att validera mot.
2. Den styr standardsläge eller quirks läge.

Ditt sätt att använda SVG kommer i och för sig inte att fungera i html-läge och inte alls i MSIE - väl?

1) skräpet kanske inte gör så stor skada, i praktiken, men koden validerar inte längre.

Källa:
<input type="button" value="Do the HTML thing" onclick="doTheHtmlThing()"/>

Resultat:
<input onclick="doTheHtmlThing()" start="fileopen" type="button" height="82" maxlength="2147483647" loop="1" size="20" value="Do the HTML thing">

2) Jag bygger en applikation som kan liknas med ett content management system. Och efter att ha manipulerat html-dokumentet behöver jag extrahera all html inom en viss div. Finns det något annat sätt att göra det på?

itpastorn skrev:

innerHTML är inte skapat för XML. Så länge som du måste kunna skicka din sida som text/html så ÄR den inte XHTML. Webbläsrens DOM-hantering är HTML och inte XHTML oavsett Doctype.

Din Doctype fyller bara två funktioner:
1. Den anger syntax att validera mot.
2. Den styr standardsläge eller quirks läge.

Ditt sätt att använda SVG kommer i och för sig inte att fungera i html-läge och inte alls i MSIE - väl?

Aha, nu trillade poletten ner. Testade att skicka den som application/xml, och då funkar det som man vill :)

Dock så lades xmlns="http://www.w3.org/1999/xhtml" till på varenda tagg. Koden validerar ändå, så då får jag vara nöjd.

(Att svg:n inte funkar i IE är i detta fall inte viktigt)

stephan skrev:

Har lite trubbel med det icke standardiserade Element.innerHTML.

http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#innerhtml0
http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#innerhtml1

zcorpan skrev:

http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#innerhtml0
http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#innerhtml1

När jag först hörde att innerHTML skulle standardiseras i HTML 5 så var jag skeptisk.
Det kändes lite som ett slag i ansiktet på DOM-modellen att uppmuntra till stränghantering av ett helt dokumentträd.
Men när jag nu läser specifikationen så känns det helt rätt eftersom det sker enligt en tydlig "serialization algorithm".
Heja WHATWG (y)