Keskustelu: Nettisivujen teko: Javascript: appendChild()

Hei!

Kysymykseni kuuluu kun tällä liittää elementtejä toisiinsa, miten päin se kuuluu tehdä? Eli jos vaikka luo taulukon, jossa muutama rivi ja muutama boksi rivillä, niin kuulukoo ensin liittää rivi taulukkoon, sitten boksit riville ja lopuksi boksiin sisältö, vai päinvastoin?
Eli:

var table = document.createElement("table");
var tr = document.createElement("tr");
var td = document.createElement("td");
var teksti = document.createTextNode("tekstiä");
document.appendChild(table);
table.appendChild(tr);
tr.appendChild(td);
td.appendChild(teksti);

vai näin?:

var table = document.createElement("table");
var tr = document.createElement("tr");
var td = document.createElement("td");
var teksti = document.createTextNode("tekstiä");
td.appendChild(teksti);
tr.appendChild(td);
table.appendChild(tr);
document.appendChild(table);

Ymmärtääkseni on suositeltavaa tehdä hommat käänteisesti, eli alkaa rakentamaan elementtejä sisältä ulospäin. Eli sisin elementti liitetään ensin toisiksi sisimpään jne. Mutta asiasta viidenteen. Tuo elementtien luonti on JS+DOM -yhdistelmällä varsin vaativaa koodirivien määrän ollessa mittarina. Suosittelisin tutustumista johonkin apukirjastoon, kuten Scriptaculouksen Builderiin. Tuolla Builderilla esimerkiksi tuo kirjoittamasi koodinpätkä menisi jotakuinkin seuraavasti:

document.appendChild(Builder.node('table', [
    Builder.node('tr', [
        Builder.node('td', [ 'tekstiä' ])
    ])]));

Tuo esimerkki oli tietysti varsin triviaali, mutta Builderin avulla myös elementtien attribuuttien määrittely on todella helppoa, sillä Builder käyttää (kuten huomattua) JSON-formaattia. Siitä vain tutustumaan ja laskemaan vähentyneitä koodirivejä :)

Edit: Ja vielä sen verran, että vasta ilmestyneessä Scriptaculouksen tuoreimmassa versiossa tuo Builder ottaa parametrikseen myös html-koodia ja tekee siitä nuo DOM-elementit. Itse en sitä ole kuitenkaan ottanut tavaksi käyttää, sillä tapa on liian "innerHTML:mainen" ja jonkunlaisia puristejahan tässä ollaan :)

Joo, tuo tosiaan tuntuu melko työläältä, kun koodia tulee niin paljon jopa pikku juttuja tehdessä.. Pitääpä siis tutustua tuohon builderiin:)

Lisäkysymys aihetta sivuten, onko olemassa sellaista funktiota, joka palauttaa jonkin elementin "lasten" määrän? Eli siis näiden lapsielementtien, vai mitä onkaan suomeksi.

Muistelisin jotta elementti.childNodes.length;

Täytyy muistaa että tuo childNodes ottaa mukaan myös ne tyhjät tekstinodet, jolloin tulos ei aina välttämättä ole se mitä odottaisi. Mureakuhassa (saattoi olla täälläkin) oli taannoin keskustelua noiden tyhjien tekstisolmujen trimmaamisesta, mutta itse vankkumattomana Prototypen kannattajana käytän Element-luokan cleanWhitespace-metodia.

Kiitoksia vastauksista, ja vielä sellainen kysymys, et miten saa IEssä javascript-virhekonsolin näkyviin?

IE:ssä ei ole muuta kuin se virheikkuna, joka avautuu alapalkin vasemman laidan virhekuvakkeesta pyydettäessä. Tämä sekä IE6:ssa että IE7:ssä.

IE:lle on kuitenkin tarjolla Developer Toolbar, jolla ei kuitenkaan voi debuggia JavaScriptiä. Googlen avulla kuitenkin löysin vielä lisää tietoa, joten luepas tämä artikkeli IE7:n JavaScriptin debuggaamisesta.

On kyllä hirveän ironista että juuri IE:llä jolla sitä kunnon virhekonsolia tarvittaisiin, sitä ei ole, mutta sitten taas paremmilla selaimilla (joissa JS-tukikin on astetta parempi) se taas on. Eihän se niissäkään tietysti hyödytön ole, mutta todella ärsyttävää ja aikaa vievää try-catch-alert-kikkailua tuo IE:n JS-virheiden etsintä, varsinkin kun sen antamat virheilmoitukset ovat niin ympäripyöreitä ja kryptisiä. Luulisi kunnon JS-konsolin kuuluvan joka selaimen vakiovarusteisiin.

Firefoxissa esimerkiksi tilanne on aivan toinen. Itse odotan Firebug-laajennoksen tulevaa 1.0-versiota kuin kuuta nousevaa :)