prototype på object (IE)

<ole>

Det er det sandelig også - hvis altså bare FF overholdt standarden. Du kan prototype på et alm. JavaScript-objekt - instantieret med 'new Object()', en constructor funktion eller JS' shorthand for objekt-instantiering '{}'.

Det, du gerne ville kunne prototype på, er en DOM-node eller et DOM-element og det kan man ikke (eller burde i hvertfald ikke kunne det). Sådan én/ét er nemlig ikke det JS-objekt, vi kendte fra de gamle fjerde generations browsere - og det har det faktisk ikke været siden 1998, da W3C fremkom med den færdige DOM Level 1 rekommandation.

Derudover har innerHTML ikke noget at gøre i DOM-kodning. Den var en okay nødløsning, før browserne begyndte at understøtte DOM, men bør ikke anvendes længere.
Faktisk har den aldrig været valid i nogen somhelst standard og udover at stride diamentralt mod W3C's tanker om retningen, webkodning bør tage, har den også alvorlige bagdele. Af disse kan f.eks. nævnes, at da den jo overskriver det dokument-fragment, der behandles, slettes samtidig alle programmatiske referencer, der måtte eksistere til og fra elementer i fragmentet.

/mvh
</bole>

okææ undskyld min dårlige programmering af et teste program (innerHTML) :D

Men hvordan gør jeg så at den tilføjer en function hver gang jeg laver et nyt DIV

altså noget i stil med: (Bare uden to talét createElement2 <--)

document.createElement2 = function (tagName)
{
  var element = document.createElement(tagName);
  element.setHtml(sHTML)
  {
    bla bla...
  }
  return element;
};

var oTest = document.createElement2("div");
oTest.setHtml("bla");
document.body.appendChild(oTest);

:P
element.setHtml = function(sHTML)

altså sådan :D

<script type="text/javascript">
document.createElement2 = function (tagName)
{
  var element = document.createElement(tagName);
  element.setHtml = function (sHTML)
  {
    this.innerHTML = sHTML;
  };
  return element;
};
var oTest = document.createElement2("div");
oTest.setHtml("bla");
document.body.appendChild(oTest);
</script>

Ikke helt  =)
For det første er det en skidt idé at sætte expando-properties på document-objektet. Jeg ved godt, at bl.a. DreamWeavers extensions gør flittigt brug af denne fremgangsmåde - men det er altså ikke smart. En meget god side, der omtaler problemet:
    http://msdn2.microsoft.com/en-us/library/ms533019.aspx

- i din situation har specielt dette afsnit indteresse:
    "Keep Your Expando Properties Off the Document"

Sådan noget lignende ville jeg selv gøre:

function myObj(sTagName) { // Constructor funktion
    this. oElm = document.createElement(sTagName);
    return this;
}
var _p = myObj.prototype; // Opret variabel, hvis du skal tilføje flere ting til prototypen
_p.setInnerHtml = function (sStr) { // Metode på objektet
    this.oElm.innerHTML = sStr;
}

function foo() {
    var o = new myObj("div");
    o.setInnerHtml("Noget...<br>- og noget andet");
    document.body.appendChild(o.oElm);
}

- eller sådan, hvis du vil gøre det endnu lettere:

function myObj(sTagName) {
    this. oElm = document.createElement(sTagName);
    return this;
}
var _p = myObj.prototype;
_p.setInnerHtml = function (sStr) {
    this.oElm.innerHTML = sStr;
}
_p.append2object = function (oParent) {
    oParent.appendChild(this.oElm);
}

function foo() {
    var o = new myObj("div");
    o.setInnerHtml("Noget...<br>- og noget andet");
    o.append2object(document.body);
}

olebole> Men du bruger jo innerHTML her?:    this.oElm.innerHTML = sStr;

thesurfer >> Yups ... fordi 'den formastelige' skrev:
    "okææ undskyld min dårlige programmering af et teste program (innerHTML) :D"

Man kan altid bruge innerHTML til en test ... det gør jeg skam også selv. Til gengæld bruger jeg den _aldrig_ i 'skarp' kode (kode på nettet)  ;o)

olebole> Hvis du aldrig bruger innerHTML "i 'skarp' kode (kode på nettet)", hvad bruge du så? :-)

Det er dér jeg vil hen.. alternativet.. :-)

Ja det kunne være createTextNode eller insertAdjacentHTML men det er ikke særligt hurtig at bruge dem.. de kan kun bruges til at fylde din js-file op med data :D

Både innerText og innerHTML er hurtiger ^
http://msdn2.microsoft.com/en-us/library/ms533019.aspx

og hastigheden er den samme i firefox skal bare lave <script language="JScript"> til <script type="text/javascript">

Når det er vist lukketid..

Smider du lige et svar Ole..

Både innerHTML, innerText og insertAdjacentHTML er invalide properties, der ikke eksisterer i nogen officiel standard. De to sidste fungerer kun i IE, mens innerHTML er buggy i FF. Derudover overskriver innerHTML det dokument-fragment, den bruges på - hvilket betyder, at programmatiske referencer til og fra elementer i fragmentet overskrives. Sluttelig er innerHTML komplet forbudt/ubrugelig i forbindelse med XHTML.
Undgå så vidt muligt innerHTML  =)

Man kan bruge DOM på fiksere måder, end MS viser i de 12 tips bag linket ovenfor. Man kan f.eks. klone et element med ELEMENT.cloneNode(true). Hvis elementet i forvejen havde noget tekst i sig, kan du ændre den med
    ELEMENT.firstChild.nodeValue = "noget nyt";

På den måde kan du have større HTML-strukturer af nestede elementer (f.eks. en tabelrække med celler) liggende som templates. Når du skal bruge 'element-klumpen', kloner du den - og sætter sub-elementernes firstChild's nodeValue.
Blot skal du - af hensyn til performance - altid sætte eventListeners, _efter_ elementerne er indsat i sidens DOM

ahhh.. hvad gør jeg forkert her... :(

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Smiley</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">

  var Smiley = ["ablow", "angry", "beg", "biggrin1", "biggrin2", "blink", "blush2",
                "book", "bruce", "clap", "dance", "doh", "eek", "giggle", "help",
                "hi", "idea", "innocent", "notworthy", "rits", "rolleyes", "rotfl",
                "sad", "sadbye", "sleep"];

  function createSmiley()
  {
    var oBody = document.getElementsByTagName("body")[0];
    var oTable = document.createElement("table");
    var k = 0;
    for (var i = 0; i <= 4; i++)
    {
      var oRow = document.createElement("tr");
      for (var j = 0; j <= 4; j++)
      {
        var oCol = document.createElement("td");
        var oImg = document.createElement("img");
        oImg.src = Smiley[k]+".gif";
        oCol.appendChild(oImg);
        oRow.appendChild(oCol);
        k++;
      }
      oTable.appendChild(oRow);
    }
    oBody.appendChild(oTable);
    /* alert(oBody.innerHTML); */
  }
    </script>
  </head>
  <body>
    <a href="java script:createSmiley();">Smiley</a>
  </body>
</html>

problemet er at den ikke viser noget.. kun i FF

Du mangler et tbody-element  ;o)

  function createSmiley()
  {
    var oBody = document.getElementsByTagName("body")[0];
    var oTable = document.createElement("table");
    var oTBody = document.createElement("tbody");
    oTable.appendChild(oTBody);
    oBody.appendChild(oTable);
    var k = 0;
    for (var i = 0; i <= 4; i++)
    {
      var oRow = document.createElement("tr");
      for (var j = 0; j <= 4; j++)
      {
        var oCol = document.createElement("td");
        var oImg = document.createElement("img");
        oImg.src = Smiley[k]+".gif";
        oCol.appendChild(oImg);
        oRow.appendChild(oCol);
        k++;
      }
      oTBody.appendChild(oRow);
    }
  }

- og tak for points  ;o)

hvad gør tbody da??

    <table>
    <tr>
      <td>Sådan laver JEG en tabel</td>
    </tr>
    </table>

    <table>
    <tbody>
    <tr>
      <td>Ikke sådan</td>
    </tr>
    </tbody>
    </table>

Du burde lave den, som i andet eksempel. Når du skriver den første kode, opretter browseren selv et tbody-element (prøv at teste med innerHTML).
Bruger du DOM, opretter browseren derimod ikke selv elementet - men det _skal_ være der, så du må selv oprette det  =)

Prøv at kikke lidt på dette eksempel. Det gør det samme, men på en anden måde. Du sparer en masse oprettelser af elementer ved at oprette en template på onload:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Smiley</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">

  var Smiley = ["ablow", "angry", "beg", "biggrin1", "biggrin2", "blink", "blush2",
                "book", "bruce", "clap", "dance", "doh", "eek", "giggle", "help",
                "hi", "idea", "innocent", "notworthy", "rits", "rolleyes", "rotfl",
                "sad", "sadbye", "sleep"];

  function createSmiley()
  {
    var oBody = document.getElementsByTagName("body")[0];
    var oTable = oTmpl.table.cloneNode(true)
    var oTBody = oTable.getElementsByTagName("tbody")[0];
    oBody.appendChild(oTable);
    for (var i = 0; i <= 4; i++)
    {
      var oRow = oTmpl.tr.cloneNode(true)
      var aCell = oRow.getElementsByTagName("td");
      for (var j = 0; j < aCell.length; j++)
      {
        var oCol = aCell[j];
        oCol.getElementsByTagName("img")[0].setAttribute("src", Smiley[(i*4)+j]+".gif");
      }
      oTBody.appendChild(oRow);
    }
  }

var oTmpl = null;
window.onload = function() {
    var oTbdy = document.getElementById("myTbody");
    var oTable = oTbdy.parentNode;
    var oRow = oTbdy.getElementsByTagName("tr")[0];
    oTmpl = {tr: oRow.cloneNode(true)};
    oTbdy.removeChild(oRow);
    oTbdy.attributes.removeNamedItem("id"); // Fjern tbody'ens id-attribute, hvis flere skal indsættes
    oTmpl.table = oTable.cloneNode(true);
    oTable.parentNode.removeChild(oTable);
    oTmpl.table.style.display = "block";
}
    </script>
  </head>
  <body>
    <a href="java script:createSmiley();">Smiley</a>
   
    <table style="display:none">
        <tbody id="myTbody">
            <tr><td><img src=""></td><td><img src=""></td><td><img src=""></td><td><img src=""></td></tr>
        </tbody>
    </table>
  </body>
</html>

- spørg, hvis der er noget i koden, du ikke forstår  ;o)

hæ hæ.. kan bare ikke se hvad tbody skal bruges til..

tbody-elementet er en nødvendighed ifølge standarden:
    http://www.w3.org/TR/html401/struct/tables.html#h-11.2.1

Som du ser, kan et table-element ikke indeholde tr-elementer som børn ... kun caption-, col-, colgroup-, thead-, tfoot- og tbody-elementer.

At så browserne tørrer måsen på os og sætter skidtet ind, er en hel anden snak - men altså kun i den skrevne kode  ;o)

ha ha.. den var ellers god "..tørrer måsen på os.." :D

Ja ja, men så må jeg jo bare lave det med Tbodt

TBODY :P