Problem med insertAdjacentHTML ift. firefox

Har kigget lidt på denne tråd, men kan ikke helt gennemskue det...
http://eksperten.dk/spm/497322

<ole>

Du kan gøre det med innerHTML - men du kan også gøre det med DOM. Det bliver alligevel løsningen i løbet af et par år, hvor innerHTML bliver ubrugelig  :)

function Expand() {
    var f, nod, d=document;
    f = d.getElementById("fields");
    nfiles++;
    nod = d.createElement("br");
    f.appendChild(nod);
    nod = d.createTextNode(" Billede nr. "+(nfiles+1)+": ");
    f.appendChild(nod);
    nod = d.createElement("input");
    nod.type = "file";
    nod.setAttribute("name", "billeder"+nfiles);
    nod.setAttribute("size", "25");
    f.appendChild(nod);
    return false;
}

/mvh
</bole>

Jep, det dur i begge browsere...

Hvordan gør jeg så, hvis jeg vil fjerne det senest tilføjede element?

Det kan du f.eks. gøre på denne måde:
    var f = d.getElementById("fields");
    f.removeChild(f.options[f.length-1]);

:)

Kan ikke helt få funktionen der fjerner det seneste element til at fungere, her er hele koden som den ser ud nu:
-------------------------------------------------------------
//add text field
var nfiles = 0;
function Expand()
{
    if (nfiles < 6)
    {
    var f, nod, d=document;
    f = d.getElementById("fields");
    nfiles++;
    nod = d.createElement("br");
    f.appendChild(nod);
    nod = d.createTextNode((nfiles+1)+". ");
    f.appendChild(nod);
    nod = d.createElement("input");
    nod.type = "text";
    nod.setAttribute("name", "question"+nfiles);
    nod.setAttribute("class", "competitionformtext"); //css style class for text
    nod.setAttribute("style", "width:290px;height:12px;margin-top:3px;");
    nod.setAttribute("maxlength", "255");
    f.appendChild(nod);
    return false;
    }
    else
    {
    alert('Beklager, ikke plads til flere svarmuligheder');
    }
}
//remove text field
function Remove()
{
var d = document;
var f = d.getElementById("fields");
f.removeChild(f.options[f.length-1]);
}
-------------------------------------------------------------

Jeg får bare en "f.options has no properties"

Jeg har smidt lige flere point oveni, da spørgsmålet blev lidt mere omfattende end udgangspunktet...

Hehe .... sorry. Jeg fik blandet flere spm. sammen  :)

Nu opretter du jo flere ting i det script, jeg oprindelig skrev. Hvad mener du med 'det sidste element'? Vil du både fjerne break, tekst og input?

Ok, det kan jo ske :)

Ja, både break, tekst og input...

Så ville jeg vælge en helt anden approach. Noget à la:

<script type="text/JavaScript">
var nfiles = 0;
function Expand() {
    var f, mainNod, nod, d=document;
    f = d.getElementById("fields");
    nfiles++;
    mainNod = d.createElement("div");
    f.appendChild(mainNod);
    nod = d.createTextNode(" Billede nr. "+(nfiles+1)+": ");
    mainNod.appendChild(nod);
    nod = d.createElement("input");
    nod.type = "file";
    nod.setAttribute("name", "billeder"+nfiles);
    nod.setAttribute("size", "25");
    mainNod.appendChild(nod);
    return false;
}
function remLast() {
    var f, aDivs, d=document;
    f = d.getElementById("fields");
    aDivs = f.getElementsByTagName("DIV");
    if (aDivs.length<1) return;
    f.removeChild( aDivs[aDivs.length-1] );
}
</script>

<table cellspacing="0" cellpadding="0" border="0">
<tr>
    <td><button onclick="Expand()">Indsæt</button>
        <button onclick="remLast()">Fjern</button></td>
</tr>
<tr>
    <td id="fields"></td>
</tr>
</table>

Nu opretter Expand() et div med teksten og input-elementet. Derved får du stadig dit liniebrud, men det er lettere at holde styr på  ;o)

Jep, det dur :)
Mange tak...

En lille ubetydelig ting, men i IE vises form feltet ikke med den style jeg smider på - den vises bare med default udseende. Firefox viser dog feltet korrekt... Ved du hvorfor?

Gør sådan her:
    var f, mainNod, nod, d=document;
    f = d.getElementById("fields");
    nfiles++;
    mainNod = d.createElement("div");
    f.appendChild(mainNod);
    nod = d.createTextNode((nfiles+1)+". ");
    mainNod.appendChild(nod);
    nod = d.createElement("input");
    nod.type = "text";
    nod.setAttribute("name", "question"+nfiles);
    nod.setAttribute("class", "competitionformtext"); //css style class for text
    nod.setAttribute("style", "width:290px;height:12px;margin-top:3px;");
    nod.setAttribute("maxlength", "255");
    mainNod.appendChild(nod);
    return false;

<input type="file"> kan næsten ikke styles - og mindre i FF end i IE - det kan du ikke gøre noget ved. Desuden ser det også rigtig skidt ud i IE at sætte en højde på 12px  :)

Det er et tekstfelt...
nod.type = "text";

Hehe ... jeg må vist til at læse lidt bedre  :)
Prøv at sætte de enkelte style-properties:
  nod.style.width = "200px";
  nod.style.height = "12px";
... osv

Jep, det virker.

Man kan bare ikke bruge bindestreg som font-family eksempelvis, så mulighederne er ret begrænsede....

Men mange tak for hjælpen!!

Eller jo.

Man skal bare bruge den rigtige syntaks:
http://www.mozilla.org/docs/dom/domref/dom_style_ref18.html#1002335

font-family skrives fontFamily

yups ... det gælder for alle style-properties, der i CSS indeholder en bindestreg. Den udelades i JS, hvor der i stedet anvendes i 'camelCase':
z-index => zIndex
border-width => borderWidth
... osv  ;o)

PS: gælder naturligvis også din margin-top  :)

Her er den endelige løsning:
------------------------------------------------------------
<script language="JavaScript" type="text/JavaScript">
//add text field
var nfiles = 0;
function Expand()
{
    if (nfiles < 6)//giver max 7 text felter
    {
    var f, mainNod, nod, d=document;
    f = d.getElementById("fields");
    nfiles++;
    mainNod = d.createElement("div");
    f.appendChild(mainNod);
    nod = d.createTextNode((nfiles+1)+". ");
    mainNod.appendChild(nod);
    nod = d.createElement("input");
    nod.type = "text";
    nod.setAttribute("name", "question"+nfiles);
    nod.setAttribute("class", "competitionformtext"); //css style class for text
    nod.setAttribute("style", "width:290px;height:12px;margin-top:3px;");
    nod.style.fontFamily = "tahoma, helvetica, arial, verdana, sans-serif";
    nod.style.fontSize = "11px";
    nod.style.color = "#555555";
    nod.style.width = "289px";
    nod.style.height = "12px";
    nod.style.marginTop = "3px";
    nod.style.paddingLeft = "3px";
    nod.setAttribute("maxlength", "255");
    mainNod.appendChild(nod);
    return false;
    }
    else
    {
    alert('Beklager, ikke plads til flere svarmuligheder');
    }
}
//remove text field
function Remove()
{
    if (nfiles != 0)
    {
    var f, aDivs, d=document;
    f = d.getElementById("fields");
    aDivs = f.getElementsByTagName("DIV");
    if (aDivs.length<1) return;
    f.removeChild( aDivs[aDivs.length-1] );
    nfiles--;
    }
    else
    {
    alert('Beklager, du kan ikke fjerne det sidste felt.');
    }
}
</script>
------------------------------------------------------------

Til at kalde scriptet med:
------------------------------------------------------------
<a href="#" onclick="Remove()">--</a>/<a href="#" onclick="Expand()">++</a>
------------------------------------------------------------

Min <td>
------------------------------------------------------------
<td id="fields">
1. <input name="question0" id="question0" class="competitionformtext" type="text" style="width:290px;height:12px;" maxlength="255">
</td>
------------------------------------------------------------

Jeg bruger det i et cms, hvor jeg lader brugeren bestemmer hvor mange svarmuligheder der skal være til et spørgsmål i en given konkurrence....

Yups ... lige et par tips:
Click-event'en på et link fyres af lige før linket afvikler sideskiftet, der er defineret af dets href. Returnerer du false i din onclick-handler, undgår du, at linket 'navigerer'. Nogle browsere har det med at springe til top, når man klikker på et link med en 'havelåge' i href'en - og det undgår du med:
  <a href="#" onclick="Remove();return false">--</a>

I CSS kan du bruge flere classes på et element:

.competitionformtext {
  /* nogle rules her, jeg ikke kender */
}
.specialFelt {
  font: 11px tahoma, helvetica, arial, verdana, sans-serif;
  color: #555555;
  width: 289px;
  height: 12px;
  margin-top: 3px;
  padding: 3px;
}

<input name="question0" id="question0" class="competitionformtext specialFelt" maxlength="255">

Ok, smart nok :)