[JS] CSS-class en target aan .link toevoegen

[AxiMaxi]

code:

eenString="Blah";
eenURL="http://www.blah.com";
document.write(eenString.link(eenURL));

is 't equivalent van

code:

<a href="http://www.blah.com">Blah</a>

Maar wat moet ik in JavaScript doen om er het volgende van te maken?

code:

<a href="http://www.blah.com" class="css class" target="_parent">Blah</a>

[Verwijderd]

In je eerste stukje code creer je een string waarin een stuk zit wat kan worden opgevat als een link. Het is geen link object (daarvoor zou je DOM methoden moeten gebruiken), maar de browser is slim genoeg om te zien dat het een link kan worden en behandeld het ook zo.

Echter, je hebt geen enkele referentie naar je link als een object zijnde. Zodra je innerHTML of document.write() gebruikt is er geen enkele referentie tussen JS en elementen in je pagina.

Wat je dus kunt doen is:

a) De link opzoeken met bijvoorbeeld document.getElementsByTagname welke je een collection returned met alle links in document.

b) Je link opzetten met behulp van valide DOM methoden


<script type="text/javascript">
var mijnlink = document.createElement('A');
var label = document.createTextNode('de tekst in de link);
mijnlink.appendChild(label);
mijnlink.href = 'http://www.blah.com';
mijnlink.className = 'css class';
document.body.appendChild(mijnlink);
</script>

Er is nu een referentie naar het anchor object in mijnlink.

[ Voor 14% gewijzigd door Verwijderd op 03-05-2005 21:14 ]

[AxiMaxi]

Ah, dank voor de uitleg!
Maar als 't zo ingewikkeld gaat, doe ik het wel met document.write("<a href...en de hele reut>").

[Clay]

_{was document.write ook niet deprecated?}

Iig is ingewikkelde manier - hoewel het wat omslachtig is - wel de mooiste. Je zou ipv die createTextNode ook wel een innerHTML kunnen gebruiken op mijnlink, maar ook dat slaat zeg maar het idee dood dat je met de dom methodes nooit ongeldige html kan genereren, en met strings plakken/writen kan dat wel. De referentie naar je element mis je inderdaad ook. Hier is dat misschien niet zo boeiend, maar als je bv met events aan de gang gaat is het wel zo leuk dat je na het schrijven van je html elementen niet nog een keer op zoek hoeft te gaan naar die elementen.

[Verwijderd]

_{was document.write ook niet deprecated?}

http://whatwg.org/specs/web-apps/current-work/#serialization

Niet echt dus. In Opera werkt het al in XML mode zelfs. In Mozilla binnenkort vast ook.

[André]

Verwijderd schreef op dinsdag 03 mei 2005 @ 21:49:
[...]
http://whatwg.org/specs/web-apps/current-work/#serialization

Niet echt dus. In Opera werkt het al in XML mode zelfs. In Mozilla binnenkort vast ook.

Jammer, mag van mij er wel uit, evenals innerHTML (of die zou read-only moeten worden)

[Verwijderd]

Sterker nog, document.write levert in IE fikse problemen op als er veel images geladen moeten worden. Het is niet voor niets dat een hoop treeviews keihard crashen omdat ze uit een hoop afbeeldingen worden opgezet. Het is de snelste methode, maar wel tegen een prijs.

Als je het overigens nog echt puristisch wil aanpakken zou je eigenlijk voor setAttribute moeten gaan, dan doe ik het in mijn voorbeeld niet op de goede manier.

[Clay]

Verwijderd schreef op woensdag 04 mei 2005 @ 08:38:
Als je het overigens nog echt puristisch wil aanpakken zou je eigenlijk voor setAttribute moeten gaan, dan doe ik het in mijn voorbeeld niet op de goede manier.

Daar is dan alleen weer het probleem van dat je in IE met setAttribute alsnog "className" moet gebruiken, en in echte browsers gewoon "class". node.className = 'melp'; mag wat ranziger zijn, maar het werkt tenminste overal. Float en styleFloat is ook zo'n suf verschil

[AxiMaxi]

André schreef op dinsdag 03 mei 2005 @ 23:59:
[...]

Jammer, {document.write} mag van mij er wel uit, evenals innerHTML (of die zou read-only moeten worden)

Verklaar je nader...

[AxiMaxi]

Clay schreef op dinsdag 03 mei 2005 @ 21:34:
(...) Je zou ipv die createTextNode ook wel een innerHTML kunnen gebruiken op mijnlink, maar ook dat slaat zeg maar het idee dood dat je met de dom methodes nooit ongeldige html kan genereren, en met strings plakken/writen kan dat wel. De referentie naar je element mis je inderdaad ook. Hier is dat misschien niet zo boeiend, maar als je bv met events aan de gang gaat is het wel zo leuk dat je na het schrijven van je html elementen niet nog een keer op zoek hoeft te gaan naar die elementen.

Het enige wat ik wilde maken is een menubalk die op iedere pagina terugkomt. Als er dan items aan het menu moeten worden toegevoegd, hoef ik dat niet op 100 pagina's te wijzigen, maar slechts in het ene scriptfiletje. Het is dus niet nodig dat ik teruggrijp of dat het real-time veranderbaar moet zijn ofzo.
Het is eenmalig en statisch (totdat er een onderhoudsbeurt aan te pas komt).

_{En ja, sorry, de laatste twee berichten had in 1x gekund, maar toen ik daar aan dacht, was het al te laat}

[ Voor 8% gewijzigd door AxiMaxi op 04-05-2005 10:39 ]

[BtM909]

AxiMaxi schreef op woensdag 04 mei 2005 @ 10:29:
[...]


Verklaar je nader...

Tegenwoordig zou je, in principe, met DOM-methodes al je elementen kunnen vervangen, beschrijven, childs toevoegen, etc

[AxiMaxi]

BtM909 schreef op woensdag 04 mei 2005 @ 10:36:
[...]

Tegenwoordig zou je, in principe, met DOM-methodes al je elementen kunnen vervangen, beschrijven, childs toevoegen, etc

Ach zo... ja, maar da's allemaal zo omslachtig, langdradig en complex. Vind je niet?
Of vloek ik nu in de kerk?

[Verwijderd]

Over Opera 8 en document.write in XML dat werd hier beweerd. Het wil hier echter niet lukken. innerHTML in XML werkt prima, net als in Firefox nightlies.

[Verwijderd]

AxiMaxi schreef op woensdag 04 mei 2005 @ 10:38:
[...]

Ach zo... ja, maar da's allemaal zo omslachtig, langdradig en complex. Vind je niet?
Of vloek ik nu in de kerk?

Nee je vloekt niet in de kerk, maar door onwetendheid ga je soms domme dingen roepen

In principe kun je alles met Javascript definieren. Je zult meestal niet complete pagina's gaan definiëren, maar wel aanzienlijke delen als componenten.

[ Voor 21% gewijzigd door Verwijderd op 04-05-2005 10:57 ]