Snygg kod med DOM?

7 svar · 321 visningar · startad av ordell 17 mars 2003

ordellMedlem sedan sep. 200278 inlägg

Trådstart17 mars 2003 13:16#1

Finns det något sätt att "snygga" till den kod som skapas när man använder DOM?

Genom att skapa nya element med t.ex. document.createElement("p"); så kan man ju snyggt och smidigt bygga om sitt dokument m.h.a. Javascript.

Min fråga är bara; Kan man fixa till koden? Jag skulle vilja ha XHTML kompatibelkod, inte något som liknar följande:

<table cellPadding=3 cellSpacing=3 border=0>
<tbody>
<td>1</td>
</tbody>
</table>

Några förslag?

Peter SMedlem sedan dec. 20025 483 inlägg

17 mars 2003 13:36#2

Är inte riktigt med nu... JavaScript är ju ett klientsidespråk så den koden kommer ju inte att rendera i ren HTML-kod ( så som du postade ).

Eller har jag missuppfattat dig?

ordellMedlem sedan sep. 200278 inlägg

17 mars 2003 13:39#3

Asså.. med Javascript kan jag lägga till t.ex. en tabell som kommer renderas till klienten i HTML-kod. Dock är denna kod ganska ful och inget man skulle vilja spara i en databas eller så

om man jämför med exemplet ovan skulle jag vilja att det såg ut så här: (psuedokod såklarT)

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>1</td>
</tr>
</table>

Blev det klarare nu?

Peter SMedlem sedan dec. 20025 483 inlägg

17 mars 2003 13:49#4

Så du menar att t.ex. denna kod skulle renderas "fult"?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv">

<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<title></title>

<script type="text/javascript">
<!--

function add(){
	var p = document.createElement( "p" );
	p.innerHTML = "foo";
	p.style.backgroundColor = "#eee";
	document.getElementById( "foo" ).appendChild( p );
};

window.onload = add;

//-->
</script>

</head>

<body>

<div id="foo"></div>

</body>

</html>

ordellMedlem sedan sep. 200278 inlägg

17 mars 2003 14:47#5

Det beror väl hur man ser på det, den koden är inte XHTML kompatibel

<DIV id=foo><P style="BACKGROUND: #eee">foo</P></DIV>

så renderas den koden (iaf om man kör en alert på document.getElementById("foo").outerHTML, men det kanske inte spelar någon roll?)

Peter SMedlem sedan dec. 20025 483 inlägg

17 mars 2003 14:58#6

OK, det var så du menade. I Mozilla blir iallafall koden XHTML-kompatibel. Annars får du väl använda dig av någon replace()-funktion när du loopar ut koden och lägga till "snuffar" och liknande där det skall vara sådana.

dectgapMedlem sedan sep. 20021 655 inlägg

17 mars 2003 17:23#7

ordell skrev:

Det beror väl hur man ser på det, den koden är inte XHTML kompatibel
<DIV id=foo><P style="BACKGROUND: #eee">foo</P></DIV>
så renderas den koden (iaf om man kör en alert på document.getElementById("foo").outerHTML, men det kanske inte spelar någon roll?)

Att IE ändrar lite i all kod för att enklare skriva ut den är inget du kan komma runt, hur du än skriver koden (oavsett genom ren html, eller genom JavaScript alltså).

Jag är dålig på de korrekta termerna och hur det hela egentligen fungerar, men t ex kan man skriva en div-tagg med ett id-attribut på flera olika sätt:

1. <div id=foo></div>
2. <DIV ID="foo"></DIV>
3. <div id="foo"></div> // xhtml
m.fl

För enkelhetens skull gör sedan browsern om alla ovanstående exempel till

<DIV ID=foo></div>

och skriver ut det.

Testa själv följande:

<div id="foo"><p style="background: #eee">foo</p></div>

<button onclick="alert(document.getElementById('foo').outerHTML);">Klicka</button>

Byt gärna ut lite versaler, fnuttar, mellanslag m.m., och se att resultatet blir detsamma.

ordellMedlem sedan sep. 200278 inlägg

17 mars 2003 18:31#8

Jo, jag misstänkte det...

Grejjen är att jag vill spara infon i en databas, då vill jag ha "snygg" (validerad) html i databasen...