[Javascript] Element HTML wijzigen

[Verwijderd]

Hallo,

Ik ben bezig aan een website waarin de klant graag Lightbox wilt gebruiken. Omdat de klant niet zo technisch is, leek het me handig om een functie te maken die alle IMG-element in een bepaalde container (in dit geval een DIV) automatisch doet omzetten naar Lightbox element. Hierdoor hoeft de klant niet voor iedere afbeelding een a-link aan te gaan maken met de benodigde rel="lightbox[group]". Ik krijg het echter niet helemaal voor elkaar.

Ik heb al de mogelijkheid om door alle elementen in een container te loopen met de volgende code:

JavaScript:

function ReplaceAllInContainer (containername)
{
    var imgs = document.getElementById(containername).getElementsByTagName("img");

    for (var i = 0; i < imgs.length; i++)
    {
        
    }
}

Maar nu zit ik met het probleem dat ik voor en na het element een <a> en </a> moet invoegen. Met innerHTML kan het niet, omdat die alleen de HTML binnen het element pakt. Ik heb al functies gevonden zoals InsertBefore, maar deze doen de truuk niet.

Wie kan mij uithelpen?

Alvast bedankt,

Daryl

[T-MOB]

Ik zou een nieuw element <a> aanmaken. Een insertBefore() gebruiken om de <a> voor de <img> in de DOM te plaatsen en dan met appendChild() het image aan de link toevoegen.

[Noork]

Kun je niet gewoon de lightbox toepassen op 'div_id/class'.img? Volgens mij kun je dit gewoon oplossen zonder iets toe te voegen aan de image.

[boe2]

kijk eens naar document.createElement("a") en appendChild

[ Voor 14% gewijzigd door boe2 op 06-04-2009 15:32 ]

[Verwijderd]

Bedankt iedereen, ik heb het voor elkaar gekregen dankzij jullie hulp. Ik gebruikte de insertBefore methode voorheen fout. De uiteindelijke code die werkt:

JavaScript:

function ReplaceAllInContainer (containername)
{
    var imgs = document.getElementById(containername).getElementsByTagName("img");

    for (var i = 0; i < imgs.length; i++)
    {
        NewA = document.createElement('A');
        NewA.href = imgs[i].src;
        NewA.rel = "lightbox[content]";
        imgs[i].parentNode.insertBefore (NewA, imgs[i]);
        NewA.appendChild(imgs[i]);
    }
}