[js]innerHTML 'upgraden' naar DOM functies?

[Verwijderd]

Ik ben (nog steeds) bezig met het bouwen van een WYSIWYG editor in js. Deze editor moet als Fx extensie te gebruiken zijn om eenvoudig op diverse fora te kunnen posten.

Omdat de pagina's dus puur lokaal zullen zijn heb ik niet de luxe van bijvoorbeeld php en mysql om hierbij Posticons, smilies e.d. op te bouwen. Hiervoor moet ik dus ook javascript gebruiken.

Nu heb ik de volgende code gemaakt om een smilietabel te maken, en ervoor te zorgen dat smilies worden ingevoegd als erop geklikt wordt.

code:

function loadSmilies()
{
    var smilieTable;
    
    smilieTable='<table id="smilietable"><tr>';
    smilieTable+='<td>[img]"'[/img]</td>';
    
    for (var i=1; i<smilieLocation.length; i++)
    {
        if ((parseInt(i/smiliesPerRow))==(parseFloat(i/smiliesPerRow)))
        {
            smilieTable+='</tr><tr>';
        }
        smilieTable+='<td>[img]"'[/img]</td>';
    }
    
    
    smilieTable+='</tr></table>';
    document.getElementById('smilies').innerHTML=smilieTable;
}

Deze code werkt, en laad ook snel genoeg (mits je geen honderden smilies hebt natuurlijk). Alleen, ik walg zelf echt een beetje ( ) van deze code. Naast het feit dat ik niet zo gecharmeerd ben van het gebruik van innerHTML staan er natuurlijk nog meer smerige dingen in, zoals onclick etc...

Nu heb ik dus zitten denken dit om te zetten naar DOM-code, alleen naast het feit dat ik niet zo bekend ben met het gebruik van DOM (veel gegoogle dus!) heb ik ook gehoord dat dit stukken langzamer is.

Nou zou ik graag willen weten wat jullie advies is/ervaringen zijn op dit gebied. Moet ik overstappen op het gebruik van puur DOM, misschien iets ertussenin. Kan ik misschien deze code gebruiken, maar het toch een beetje toonbaar maken?

Alvast bedankt.

[Verwijderd]

Mijn ervaring is erg simpel. VIa de DOM werkt het (mits de w3c dom gebruikt wordt) bijna altijd op elke browser die het w3c dom gebruikt, dus dat is wel een voordeel. Echter klopt het wel dat het een stuk trager is dan hoe je het nu doet. Als je een paar regels inlaad ja ach, dan is het via DOM lekker makkelijk en snel voor elkaar, maar bij een iets grotere hoeveelheid zal ik al snel overgaan op wat je zelf hebt gemaakt, omdat dit toch wel heel veel sneller is. Wou dat ik kon zeggen een factor 10 maar het verschil was altijd zo groot dat ik het nooit heb opgemeten.

Iets ertussenin is moeilijk voor elkaar te krijgen, omdat als je een string met eigenschappen als DOM pbject gaat parsen, niet altijd alle parameters worden meegenomen. Hierdoor zou je toch weer DOM bewerkingen moeten doen. Ik zou zelf kiezen voor kleine hoeveelheden voor DOM maar voor grote (lees 100+) hoeveelheden toch via innerHTML. Het is iets minder leesbaar maar wel snel.

(soms zit er wel een nadeel in mbt opmaak, als je dit truukje gebruikt bij tabellen met veel records oid. Dan wil IE weleens de weg kwijt raken

[André]

In tegenstelling tot watYilias beweerd zijn mijn ervaringen met DOM methodes toch een stuk beter dan die met innerHTML, vooral in gecko based browsers zullen DOM methodes veel sneller werken. En ja, het is wel meer werk maar ook een stuk netter.

Om jouw voorbeeld te herschrijven ben je de volgende zaken nodig: appenChild, createElement, insertRow en insertCell

[Sappie]

André schreef op maandag 09 mei 2005 @ 12:05:
In tegenstelling tot watYilias beweerd zijn mijn ervaringen met DOM methodes toch een stuk beter dan die met innerHTML, vooral in gecko based browsers zullen DOM methodes veel sneller werken.

Wat betreft de snelheid valt het toch wel tegen zoals hier te zien: http://www.quirksmode.org/dom/innerhtml.html

Maar ik vind het gebruik van DOM methodes iig ook een stuk netter.

[Verwijderd]

Bedankt voor alle input. Ik heb besloten om DOM te gaan gebruiken, er gaan toch hooguit een stuk of 50 smilies mee worden gemaakt, en aangezien volgens de link die net werd gepost een tabel van 50x50 zo'n 300 milliseconden duurt, lijkt het snelheidsverlies me wel mee te vallen

Ik heb er dus nu de volgende functie van gemaakt, en die lijkt aardig te werken.

code:

function loadSmilies()
{
    var smilieTable;
    var smilieRow;
    var smilieCell;
    var smilieImg;
    
    smilieTable=document.createElement('table');
    smilieTable.id='smilietable';
    
    for (i=0; i<smilieLocation.length; i+=smiliesPerRow)
    {
        smilieRow=document.createElement('tr');
        for (j=i; j<i+smiliesPerRow; j++)
        {
            smilieCell=document.createElement('td');
            smilieImg=document.createElement('img');
            smilieImg.src=smilieLocation[j];
            smilieImg.title=smilieCode[j];
            smilieImg.alt=smilieCode[j];
            smilieImg.addEventListener('click', addImage, 'true');
            smilieCell.appendChild(smilieImg);
            smilieRow.appendChild(smilieCell);
        }
        smilieTable.appendChild(smilieRow);
    }
    document.getElementById('smilies').appendChild(smilieTable);
}

Alleen nu vraag ik me af wat André bedoelde met insertRow en insertCell. Die heb ik hier niet gebruikt. Is dat beter dan wat ik hier nu doe?

[Cyphax]

Verwijderd schreef op maandag 09 mei 2005 @ 12:52:

Alleen nu vraag ik me af wat André bedoelde met insertRow en insertCell. Die heb ik hier niet gebruikt. Is dat beter dan wat ik hier nu doe?

insertRow en insertCell ipv createElement("tr") of createElement("td") gok ik zo.
Of dat beter is weet ik niet, ben ik wel benieuwd naar. Misschien zijn die functies geoptimaliseerd voor tabellen in vergelijking met het universele createElement?