[JS]Javascript ript mijn sluit-tags

[Depress]

Hey,

Ik ben bezig met een projectje, en grbuik daarvoor de volgende code:

JavaScript:

elm.innerHTML                       += '<tr><td><input name="var_names[]" readonly type="text" value="{data.' + varname + '}" /></td><td><input name="var_values[]" readonly type="text" value="' + value + '" /></td><td></td></tr>';
alert(elm.innerHTML);

Echter krijg ik hier niet het gewenste resultaat. Het resultaat is namelijk:

HTML:

<TR><TD><INPUT name="var_names[]" readonly="true" type="text" value="{data.x}"/><TD><INPUT name="var_values[]" readonly="true" type="text" value="x"/><TD><TR><TD><INPUT name="var_names[]" readonly="true" type="text" value="{data.x}"/><TD><INPUT name="var_values[]" readonly="true" type="text" value="x"/><TD>

Weet iemand misschien hoe ik dit kan oplossen?
Alvast bedankt.

[Cavorka]

Eh... wat? Huh?

Je doet wat?
En er gebeurt wat?

Je tweede lijn is echt totaal anders dan je eerste lijn, en deze is ook herhaald... Lijkt me niet dat de een een gevolg is van de ander, want dat kan gewoon niet (readonly verandert niet vanzelf naar readonly="true", lower/uppercase etc).

More info please.

[ Voor 3% gewijzigd door Cavorka op 12-12-2006 18:16 ]

[wizzkizz]

Cavorka schreef op dinsdag 12 december 2006 @ 18:16:
Eh... wat? Huh?

Je doet wat?
En er gebeurt wat?

Je tweede lijn is echt totaal anders dan je eerste lijn, en deze is ook herhaald... Lijkt me niet dat de een een gevolg is van de ander, want dat kan gewoon niet (readonly verandert niet vanzelf naar readonly="true", lower/uppercase etc).

More info please.

Die wijzigingen worden zeker wel automagisch door de browser gedaan hoor (e.e.a. afhankelijk van het doctype). Alleen is het mij totaal niet duidelijk wat de ts nu eigenlijk wil bereiken.

Een iets uitgebreidere hoeveelheid *relevante* code zou ook wel welkom zijn.

[edit]
Nog eens over nagedacht, en het probleem wordt me wel een beetje duidelijk.

Staat je doctype goed?
Staat het wel netjes in een <table>?
Is het geen optie om het netjes via DOM-calls te doen?

[ Voor 13% gewijzigd door wizzkizz op 12-12-2006 18:38 ]

[SuperRembo]

Cavorka schreef op dinsdag 12 december 2006 @ 18:16:
readonly verandert niet vanzelf naar readonly="true", lower/uppercase etc.

Dat gebeurt wel. De HTML die je aan .innerHTML geeft wordt omgezet naar nodes in de DOM. Als je de property daarna opvraagt krijg je HTML terug die is opgebouwd op basis van de DOM. Hoe dat er uit ziet hangt af van de brouwser.

code:

el.innerHTML = '<input type="text" readonly value="foo"/>';
alert(el.innerHTML);

Firefox geeft dan

code:

<input readonly="readonly" value="foo" type="text">

IE6 geeft:

code:

<INPUT readOnly value=foo>

[mithras]

\ = escape character. Ik denk dat het daar mee te maken heeft. Je moet een backslash dan ook escapen met \, dus \\:
http://www.kingsley-hughe...script/javascript/esc.asp

[ Voor 1% gewijzigd door mithras op 12-12-2006 18:39 . Reden: backslah is een \, geen / :X ]

[SuperRembo]

wizzkizz schreef op dinsdag 12 december 2006 @ 18:33:
Staat het wel netjes in een <table>?
Is het geen optie om het netjes via DOM-calls te doen?

Dat zal het probleem zijn. Het kan namelijk niet netjes in een table staan omdat de html aan innerHTML wordt toegevoegd.


En een / is natuurlijk geen backslash

[ Voor 6% gewijzigd door SuperRembo op 12-12-2006 18:44 ]

[crisp]

self-closing tags is iets van X(HT)ML, niet van HTML. XHTML syntax in een HTML omgeving is invalid syntax, gelukkig corrigeren browsers dat voor je

Pas op overigens met closetags in strings in inline script, daarvan dien je de forward slash te escapen zodat de client het niet ziet als het afsluiten van het script-blok.

[ Voor 36% gewijzigd door crisp op 12-12-2006 21:18 ]

[Depress]

Het probleem ligt het hem erin dat de afsluit tags in de Innerhtml van het element weg worden gelaten.

Bedankt voor de reacties, ik ga het nu allemaal even proberen.

[crisp]

Depress schreef op woensdag 13 december 2006 @ 22:30:
Het probleem ligt het hem erin dat de afsluit tags in de Innerhtml van het element weg worden gelaten.

innerHTML - and for all I know stuur je je document ook als text/html.
HTML kent geen XML-like selfclosing tags... (nou ok, HTML5 wel, maar alleen voor gelovigen )

Verder kan je van innerHTML ook niet verwachten dat je weer exact dezelfde presentatie krijgt als je originele document.

[ Voor 26% gewijzigd door crisp op 13-12-2006 22:39 ]

[soulrider]

crisp schreef op woensdag 13 december 2006 @ 22:33:
[...]

innerHTML - and for all I know stuur je je document ook als text/html.
HTML kent geen XML-like selfclosing tags... (nou ok, HTML5 wel, maar alleen voor gelovigen )

Verder kan je van innerHTML ook niet verwachten dat je weer exact dezelfde presentatie krijgt als je originele document.

offtopic:
Van innerHTML mag je dat gerust verwachten zolang je er maar het juiste er op de juiste manier aan doorspeelt.

kijk effe naar mijn poging 't menu na te bouwen van de Belgische digibox mbv simpele xhtml, css en javascript (innerhtml en innertext varianten) - http://www.soulrider.be/tweak/vb/7204.html - de andere pagina's staan afgescherm in andere dir en zijn nog volop in de maak)
- mits wat geduld en veel rond-programmeren lukte het me toch netjes (de eerste optie aanpassen, en de 2 zowel qua tekst als html laten aanpassen ...+ linkerkant ook als html aanpassen) zolang je maar weet hoe het correct als string door te geven - en geen schrik voor een hoop code wat wellicht ook korter kon - lukt alles

@ TS:
probeer eens zoals mij het via variabelen te spelen ?
dan kan je ook netjes debuggen mbv alert

code:

var msg1= "<span class=\"optiekeuzelinks\" onclick='left(\""
var msg2 = ")\'>&lt;</span>"
var msg3 = "<span class=\"optiekeuzerechts\" onclick='right(\""
var msg4 = ")'>&gt;</span>"

var msg = msg1 + div + '",' + i + msg2 + opties[i][0] + msg3 + div + '",' + i + msg4;

var y = document.getElementById(div)

y.innerHTML = msg

een "alert(msg)" op regel 7 geeft me telkens dezelfde html-code onafhankelijk van de browser waarmee ik kijk en zo wist ik uiteindelijke de juiste samenstelling te vinden voor die string.
(een stuk uit de js-code gebruikt in m'n hierboven genoemd voorbeeld - werkt perfect in de browser waarvoor het bedoelt is: IE)

voor jou dus

code:

msg     += '<tr><td><input name="var_names[]" readonly type="text" value="{data.' + varname + '}" /></td><td><input name="var_values[]" readonly type="text" value="' + value + '" /></td><td></td></tr>'; 
alert(msg);
elm.innerHTML  = msg;

[ Voor 31% gewijzigd door soulrider op 14-12-2006 00:06 ]