Avatar billede minau Nybegynder
07. maj 2008 - 19:56 Der er 9 kommentarer og
1 løsning

InnerHTML vs DOM

Hej.

Jeg har fulgt lidt med i innerHTML vs DOM debatten.

Jeg har lavet lidt kode der bruger innerHTML, men ville gerne lave det via DOMMEN, men jeg kan ikke finde ud af at f det til at virke.

Koden jeg prøver at konvertere er

function vis(id, url){
html_open = '<iframe src="'+url+'" width="100%" height="400" scrolling="auto" frameborder="0" class="logeventIframe" ALLOWTRANSPARENCY="true">  [Din browser understøtter ikke frames. Få dig en ny,  eller <a href="'+url+'">klik her.</a>]  </iframe>'
try{
element = document.getElementById("detalje_iframe_"+id);
element.innerHTML = html_open;   
} catch (e){
alert(e);
}


(Det skal lige nævnes at elementet "detalje_iframe_"+id er en div somend jeg kalder den iframe...)

er der nogen der kan strikke eksemplet til at bruge DOM?
Avatar billede w13 Novice
07. maj 2008 - 20:52 #1
Jeg tror, det må være således:
******************************
function vis(id,url){
    var newElement=document.createElement("iframe");
    newElement.setAttribute("src",url);
    newElement.setAttribute("class","logeventIframe");
    newElement.setAttribute("className","logeventIframe");
    newElement.style.cssText="width:100%;height:40px;scrolling:auto;border:0";
    newElement.setAttribute("allowTransparency",true);
    newElement.appendChild(document.createTextNode("[Din browser understøtter ikke frames. Få dig en ny,  eller "));
    var newSubElement=document.createElement("a");
    newSubElement.setAttribute("href",url);
    newSubElement.appendChild(document.createTextNode("klik her."));
    newElement.appendChild(newSubElement);
    newElement.appendChild(document.createTextNode("]"));
    document.getElementById("detalje_iframe_"+id).appendChild(newElement);
}
******************************
Der er flere linjer end med innerHTML, og det er derfor, mange ikke tør droppe innerHTML, men det er klart den mest korrekte måde at gøre det på, hvor man bygger koden op element for element.

Bemærk dog, at hvis du kører koden 2 gange, vil elementet også blive indsat 2 gange. Hvis den skal rydde div'en "detalje_iframe_"+id, skal der tilføjes en funktion til dette som køres inden indsættelse af DOM-koden.
Avatar billede jokkejensen Novice
07. maj 2008 - 22:28 #2
Du glemte lidt noget fejlhåndtering :)
Avatar billede w13 Novice
07. maj 2008 - 22:57 #3
Der sker da ikke fejl! :P Det er DOM! :D
Avatar billede jokkejensen Novice
07. maj 2008 - 23:59 #4
Okay.. hvis du siger det..

hvad med vis(new Person('Jacob'), 0,4444444444);

?
Avatar billede jokkejensen Novice
08. maj 2008 - 00:00 #5
0.444444 even
Avatar billede jokkejensen Novice
08. maj 2008 - 00:03 #6
Det er DOM, den er egentligt sjov.. :D
Avatar billede w13 Novice
08. maj 2008 - 08:08 #7
Men hvis man ikke ved, om der kan blive overført hvad som helst som i dit eksempel, må det vel kunne løses med:

function vis(id,url){
    if(typeof(id)!="string"||typeof(url)!="string")return false;
    var newElement=document.createElement("iframe");
    newElement.setAttribute("src",url);
    newElement.setAttribute("class","logeventIframe");
    newElement.setAttribute("className","logeventIframe");
    newElement.style.cssText="width:100%;height:40px;scrolling:auto;border:0";
    newElement.setAttribute("allowTransparency",true);
    newElement.appendChild(document.createTextNode("[Din browser understøtter ikke frames. Få dig en ny,  eller "));
    var newSubElement=document.createElement("a");
    newSubElement.setAttribute("href",url);
    newSubElement.appendChild(document.createTextNode("klik her."));
    newElement.appendChild(newSubElement);
    newElement.appendChild(document.createTextNode("]"));
    document.getElementById("detalje_iframe_"+id).appendChild(newElement);
}
Avatar billede w13 Novice
19. maj 2008 - 12:56 #8
Kommet videre? :)
Avatar billede minau Nybegynder
19. maj 2008 - 15:29 #9
HOV!... jeps... det klinger :)
Avatar billede w13 Novice
19. maj 2008 - 15:51 #10
;) Tak for point!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester