Toon posts:

[JavaScript] DIV vs. TABLE & appendChild vraagje..

Pagina: 1

Acties:

77 views sinds 30-01-2008
Reageer

woensdag 5 maart 2003 10:47

Acties:

r0bert

Topicstarter

Vraag 1:
Ik was bezig met het schrijven van een scriptje en nu moet ik de keuze maken tussen de volgende mogelijkheden om een element op te bouwen.

HTML:

<table>
  <tr>
     <td>op deze manier</td>
  </tr>
  <tr>
     <td>etc..</td>
  </tr>
</table>
..

HTML:

<div>
  <div>of</div>
  <div>op</div>
  <div>deze</div>
  <div>manier</div>
</div>
..

Ik heb hier maar een klein stukje weergegeven, maar het gaat dus om een hele boel van deze element. Ik wou het eerst zelf testen, maar ik krijg de hele tijd totaal verschillende uitkomsten dus ik denk niet dat ik het echt op een goede manier test

Het gaat vooral om de snelheid.. weet iemand misschien wat sneller is, of een groot voordeel voor 1 van beiden manieren .. ?

Vraag 2:

Ik was bezig met het dynamisch toevoegen van elementen, en toen liep ik tegen dit probleem:

JavaScript:

document.createElement('TABLE').appendChild(
   document.createElement('TR').appendChild(document.createElement('TD')));

// of
document.createElement('TABLE').appendChild(
   document.createElement('TR')).appendChild(document.createElement('TD'));

? Wat is nou de juiste manier ? Of zijn ze beiden onjuist ? Ik kom er niet meer uit..

[ Voor 14% gewijzigd door r0bert op 05-03-2003 10:47 ]

woensdag 5 maart 2003 11:11

Acties:

Verwijderd

DIVs zullen altijd sneller zijn, denk ik, omdat tables een nogal uitgebreid render-algoritme nodig hebben. In de W3C CSS documentatie kun je daar meer over vinden:
http://www.w3.org/TR/REC-CSS2/tables.html#value-def-table
Bottom line is: gebruik tables als de data erin als een tabel gestructureerd moet worden en anders liever niet.

Volgens mij (ik heb het niet getest) is de eerste methode goed, omdat bij de tweede methode je de TD append aan het resultaat van TABLE+TR (wat een TABLE is).

Je kunt trouwens ook de HTMLTableElement.insertRow() en HTMLTableRowElement.insertCell() methodes gebruiken.

woensdag 5 maart 2003 11:55

Acties:

r0bert

Topicstarter

JavaScript:

1:

document.createElement('TABLE').appendChild(
   document.createElement('TR').appendChild(document.createElement('TD')));

document.createElement('TD')        ==> TD
   returnt TD DomNode

document.createElement('TR').        ==> TR
  returnt TR  DomNode

document.createElement('TABLE')    ==> TABLE
  returnt TABLE DomNode

TR.appendChild(TD)                           ==> TRTD
  returnt TD DomNode (Toch?)

TABLE.appendChild(TRTD)
  maakt de TRTD (= TD DomNode) aan het TABLE element vast ..

Zo zat ik te denken, en dan komt het dus bij die andere manier ook niet uit

[ Voor 9% gewijzigd door r0bert op 05-03-2003 11:55 ]

woensdag 5 maart 2003 12:21

Acties:

Verwijderd

Ah, ik zie het probleem, idd. appendChild returnt de appended Node...
Ik zal nog ff verder kijken.

woensdag 5 maart 2003 12:29

Acties:

Verwijderd

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Untitled</title>
<style type="text/css">
table, td {
    border:1px solid #000000;
    background-color:#FFFF00;
}
</style>
<script type="text/javascript">
<!--
function main() {
    var oTable = document.body.appendChild(
        document.createElement('table')
    );
    var oRow = oTable.insertRow(0);
    var oCell = oRow.insertCell(0);
    oCell.appendChild(document.createTextNode('ladiada'));
}
//-->
</script>
</head>

<body onload="main()">


</body>
</html>

Dit werkt. Veel korter kun je het niet maken, ben ik bang.

woensdag 5 maart 2003 13:49

Acties:

André

Analytics dude

Daar heb ik ooit eens een keer een topic over gehad:

[rml][ TABLE] Hoe tabellen plaatsen[/rml]

Daar staat vast informatie in die je kunt gebruiken.

woensdag 5 maart 2003 21:12

Acties:

Clay

cookie erbij?

hmz, ik ben ff aan het stoeien, en nu werkt dit NIET in IE, maar WEL in Moz ?

JavaScript:

window.onload = function() {
    var table = document.createElement('table');

    document.body.appendChild(table);

    var row = document.createElement('tr');
    table.appendChild(row);

    var cell = document.createElement('td');
    row.appendChild(cell);

    cell.innerHTML = 'hoi'
}

ben ik nou gek?

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

woensdag 5 maart 2003 22:35

Acties:

r0bert

Topicstarter

JavaScript:

window.onload = function() {
    var table = document.createElement('table');

    table = document.body.appendChild(table);

    var row = document.createElement('tr');
    row = table.appendChild(row);

    var cell = document.createElement('td');
    cell = row.appendChild(cell);

    cell.innerHTML = 'hoi'
}

JavaScript:

window.onload = function() {
    var table = document.createElement('table');
    var cell = document.createElement('td');
    var row = document.createElement('tr');

    cell.innerHTML = 'hoi'

    row.appendChild(cell);
    table.appendChild(row);
   document.body.appendChild(table);
}

Anders zijn de variabelen misschien reserved

[ Voor 59% gewijzigd door r0bert op 05-03-2003 22:36 ]

donderdag 6 maart 2003 03:54

Acties:

Morrar

Voor het toevoegen van cellen en rijen hebben we twee aparte functie-tjes: insertRow() en insertCell().

createElement() + appendChild() werkt wel in Moz/NS maar niet in IE... Op zich vind ik dat een beetje vaag want het zou het geheel wel consistent houden... Maar de bovengenoemde specifieke tabelfuncties zijn onderdeel van de standaard dus, tsja...

/edit:
In dit topic heb ik onderaan een voorbeeldje hiervan gepost:
http://gathering.tweakers.net/forum/list_messages/715620

[ Voor 19% gewijzigd door Morrar op 06-03-2003 03:57 ]

donderdag 6 maart 2003 09:06

Acties:

Clay

cookie erbij?

Dat is gewoon stom. Het is totaal niet consistent, niet generiek, en niet handig. Heb je eindelijk een standaard, pas je em maar beperkt toe, daar ga ik de logica niet van zien. En ook al zouden ze dit "fixen" in toekomstige IE versies, zit je altijd nog jaren met de oude meuk.
Of dit deel uit maakt van de standaard vind ik geen reden het er maar voor te doen. Dan passen "ze" de standaard maar aan. Die wordt immers gewoon door mensen als jij en ik bepaald, is niet per definitie "goed", en is dus aan verandering onderhevig

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

donderdag 6 maart 2003 11:14

Acties:

Verwijderd

Clay schreef op 06 March 2003 @ 09:06:
Dat is gewoon stom. Het is totaal niet consistent, niet generiek, en niet handig. Heb je eindelijk een standaard, pas je em maar beperkt toe, daar ga ik de logica niet van zien. En ook al zouden ze dit "fixen" in toekomstige IE versies, zit je altijd nog jaren met de oude meuk.
Of dit deel uit maakt van de standaard vind ik geen reden het er maar voor te doen. Dan passen "ze" de standaard maar aan. Die wordt immers gewoon door mensen als jij en ik bepaald, is niet per definitie "goed", en is dus aan verandering onderhevig

In feite ligt de fout niet bij de standaard, want er staat nergens in de standaard dat createElement niet zou moeten werken voor TR, TD, TH etc.

De tabel-specifieke functies zijn er juist voor het gemak van de ontwikkelaar, omdat het met createElement en appenChild zo omslachtig is om op positie n een row of cell in een tabel te hangen...

De fout ligt wat mij betreft echt bij IE, waarvan we weten dat ie een gebrekkige createElement ondersteuning heeft, helaas.

donderdag 6 maart 2003 13:10

Acties:

Morrar

Ik ben het er niet mee eens dat dit de fout van IE is: ze implementeren de methode die door de standaard wordt voorgeschreven. De standaard is echter onhelder, maar dat heeft wel een reden zoals hier boven staat. Dat IE niet _ook_ de createElement() methode mogelijk maakt vind ik te begrijpen...

Tenslotte ben ik echt geen fan van IE en vind ik ook dat de implementatie van createElement() brak is in IE... Ook is CSS2 nog niet helemaal top en er zijn wel meer mankementen/afwijkingen, maar hier kun je ze niet echt iets verwijten imho.

donderdag 6 maart 2003 13:28

Acties:

Clay

cookie erbij?

Ik ben het er niet mee eens dat dit de fout van IE is: ze implementeren de methode die door de standaard wordt voorgeschreven. De standaard is echter onhelder, maar dat heeft wel een reden zoals hier boven staat. Dat IE niet _ook_ de createElement() methode mogelijk maakt vind ik te begrijpen...

Ja dat doen ze, iig deels, maar ik vind die standaard niet heilig in de zin van dat je er maar slaafs achteraan moet hobbelen als er iets op een manier werkt die eigenlijk best makkelijker kan, of in ieder geval eenduidiger. Ik vind het een (eerlijk gezegd grove) fout van IE dat ze createElement voor tables niet ondersteunen omdat er ook insertRow/Cell bestaat.
Je kan nota bene zelfs createElement('fiets') doen als je wil.

Dat dit niet werkt houdt dan ook weer in dat als je een generieke html element "laag" in dhtml wil bouwen om die create en append smurrie te verkorten, ala:

JavaScript:

1
2
3

div = myCreateElement('div');
genest = div.myCreateElement('div');
genest.write('hoi');

... het niet werkt voor tables. Kan je daar weer uitzonderingen voor gaan maken.

[ Voor 4% gewijzigd door Clay op 06-03-2003 13:29 ]

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

donderdag 6 maart 2003 17:49

Acties:

Morrar

Ik ben het deels met je eens. Ik vind ook dat het veel netter was om met createElement() + appendChild() te werken. Daarnaast is het probleem met het invoegen op een bepaalde positie volgens mij net zo goed van toepassing op alle elementen en zou een "insertChild(oChild, iPosition)" dan een nettere oplossing zijn.

De standaard vind ik echter wel heilig. Zelfs allerlei "nuttige" uitbreidingen op de standaard vind ik bedenkelijk. Vooral IE heeft er een handje van om die te implementeren nog voordat er uberhaupt over is nagedacht of ze bij de standaard aangemeld worden... Probleem is wel dat veel mensen ze dan toch gaan gebruiken of dat dat zonder hun medeweten gebeurd door het prachtige programma FrontPage... Vervolgens krijg je als webdevver dan wel weer te horen van je baas dat hij dit en dat zag op een site en of je dat ook ff kunt maken. Kun je weer uren puzzelen op een x-browser oplossing

Of het werken met createElement() voor tabellen werkelijk zo'n uitbreiding is kun je je afvragen... Misschien niet. Het grootste probleem met IE vind ik dat createElement('fiets') een standaard element oplevert waarvan je de eigenschappen kunt instellen, maar createElement('tr/td') dat niet doet. Kortom IE herkent tr/td wel als een speciale tag, handelt ze vervolgens niet correct af (dus zoals je zou verwachten: op insertRow/insertCell achtige manier)...

[ Voor 6% gewijzigd door Morrar op 06-03-2003 17:50 ]

donderdag 6 maart 2003 19:38

Acties:

Verwijderd

Morrar schreef op 06 March 2003 @ 17:49:
De standaard vind ik echter wel heilig. Zelfs allerlei "nuttige" uitbreidingen op de standaard vind ik bedenkelijk. Vooral IE heeft er een handje van om die te implementeren nog voordat er uberhaupt over is nagedacht of ze bij de standaard aangemeld worden... Probleem is wel dat veel mensen ze dan toch gaan gebruiken of dat dat zonder hun medeweten gebeurd door het prachtige programma FrontPage... Vervolgens krijg je als webdevver dan wel weer te horen van je baas dat hij dit en dat zag op een site en of je dat ook ff kunt maken. Kun je weer uren puzzelen op een x-browser oplossing

Dat heet slim zaken doen. Zo hebben ze vanuit het niets in een zeer korte tijd het grootste marktaandeel qua browsers weten te verwerven.

donderdag 6 maart 2003 21:20

Acties:

Morrar

Dat IE zo'n groot marktaandeel heeft, heeft niets te maken met de "kwaliteiten" van die browser. Dat heeft 2 redenen:

- Het wordt meegeleverd met het meest gebruikte OS op de desktop.
- Het kan gebruik maken van handigheden omdat het meer geïntegreerd is in het OS. Bijvoorbeeld sneller opstarten omdat IE zo'n beetje al compleet geladen wordt bij het opstarten van Windhoos (desktop/de verkenner hebben het nodig etc).

vrijdag 7 maart 2003 09:11

Acties:

Clay

cookie erbij?

De standaard vind ik echter wel heilig. Zelfs allerlei "nuttige" uitbreidingen op de standaard vind ik bedenkelijk. Vooral IE heeft er een handje van om die te implementeren nog voordat er uberhaupt over is nagedacht of ze bij de standaard aangemeld worden...

In die vorm moet je ook niet gaan afwijken van de standaard; in zoverre vind ik hem ook heilig. Ik bedoel niet dat je zomaar functionaliteiten aan browsers moet gaan toevoegen, maar dat je dingen die je in die standaard tegenkomt kritisch moet bekijken. En als je dan iets tegenkoment dat, hoewel er vast grondig over nagedacht is, gewoon niet handig of logisch is of gewoon fout is, dat je dat laat merken.
De standaard zelf moet ter discussie kunnen staan, die moet je als browserontwikkelaar niet gedachteloos consumeren. Net zoals de standaard een leidraad is voor ontwikkelaars is om zich aan te houden, moeten de ervaringen van de ontwikkelaars ook een rol kunnen spelen in het doorontwikkelen van die standaard.

Ik hoop dat ik mezelf nu een beetje duidelijker heb gemaakt

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

vrijdag 7 maart 2003 14:28

Acties:

Morrar

Ja hoor, het was me na je eerste post ook al wel duidelijk welke richting je op wilde. Ik ben het ook zeker met je eens, maar het blijft gewoon leuk om over dat soort dingen te discussiëren

Ik begon met devven in de "IE4/NS4-tijd" en toen was het een hele sport om dingen te fabriceren die x-browser werkten. Ik heb nog libs liggen van vele honderden regels om maar x-browser layers af te handelen. Nu heb ik NS4 maar eens gedropt en is de sport wel een beetje minder, maar de dingen die je kunt maken zijn echt super. Daarom hecht ik ook veel waarde aan de standaard. Het is erg cool dat je nu (bijna) elk element op de pagina dynamisch kunt benaderen, dat was bij IE4/NS4 wel anders

Kortom: de standaard is toch een beetje een hobby, discussies erover ook. Maar we dreigen nu wel erg off-topic te raken, dus moesten we het bijltje er maar es bij neergooien lijkt me

vrijdag 7 maart 2003 14:54

Acties:

Clay

cookie erbij?

De xbrowser sport is wel wat minder (begon toen ook), maar die libs zijn nog steeds wel handig, alleen hoef ju niet meer een x-browser lib te schrijven, je kan nu redelijk eenvoudig korte en browsercheckloze dom-libraries (of hoe je ze ook wil noemen

) schrijven. Maar dat is ook een discussie op zich

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

Pagina: 1

Reageer