Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

DOM/JavaScript, lägg till item...nybörjarnivå

1
Skriv svar
Permalänk
Medlem
●

DOM/JavaScript, lägg till item...nybörjarnivå

Hej, jag försöker, dynamiskt, addera en ny item i en tabell av klickbara länkar. Jag har följade kod:

<HTML>
<HEAD>
<TITLE>Add menu item</TITLE>

<SCRIPT language="javascript" type="text/javascript">
function addMenuItem() {
  menuElement = document.getElementById("menu");

   if (menuElement == null) {
      alert("Failed obtain element with id menu.");
      return; // We don't want to continue executing if we failed to obtain the menu element
   }

   //var s = "<DT><B>duh</B>";
   var elem = document.createElement("duh");

   //elem.setAttribute("title", "<DT><B>duh</B>");

   menuElement.appendChild(document.createTextNode(elem));
}
</SCRIPT>

</HEAD>

<BODY onload="addMenuItem();">
<P>
<TABLE>
      <DL id="menu">
        <DT><B><A href="http://localhost/simple.html">Simple.html</A></B>
      </DL>
</TABLE>
</BODY>
</HTML>

Jag är systemprogrammerare och kan inget om webutveckling egentligen, hehe. När jag laddar den här html-filen läggs en ny item till med utseendet:

[object HTMLUnknownElement]

Denna går ej att klicka på. Jag förstod att det jag har inte kommer funka, men exakt hur skapar jag html-koden för min nya item och hur kopplar jag ihop dom? Jag har lämnat kvar lite bortkommenterad kod som inte fungerade. Tacksam för all hjälp!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Istället för att leka på elementnivå så kan du leka på kodnivå.

menuElement.innerHTML = '<a href="">En länk</a>... <div>ett lager</div>';

Redigera
Citera flera Citera
Permalänk
Medlem
●

Du har gjort ett par grundläggande fel, förmodligen baserat på ett missförstånd av createElement och createTextNode.

Det förtnämnda är till för att skapa ett HTML-element (suprise). Det du gör genom att sätta document.createElement("duh") är att ange en typ av element som inte finns i någon HTML-specifikation, nämligen <duh>. Istället är en riktig elementtyp att föredra, t ex en definitionsterm, ett stycke eller en div.

Funktionen document.createTextNode är till för att infoga text i ett element, och tar en textsträng som parameter. När du kör document.createTextNode(elem), är ju elem ingen textsträng utan ett objekt, där till är det ett påhittat "duh"-objekt eller som webbläsaren uttrycker det, [object HTMLUnknownElement]

Så här kan man istället gå till väga för att skapa ett element och lägga till innehåll i detta:

var elem = document.createElement("p"); //skapa ett stycke
elem.appendChild(document.createTextNode("Innehåll i p")); //lägga till en textnod i stycket

container.appendChild(elem); //infoga stycket i ett godtyckligt element

Bara du får de grundläggande koncepten klart för dig ska det inte vara några problem. Jag rekommenderar iaf riktig DOM-scripting framför innerHTML som totoo föreslog ovan. Det är mycket smidigare att använda objekt framför att hårdkoda HTML inuti Javascriptet.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tack för svaret, ExE. Jag fick till en innerHTML-variant som fungerade men jag vill skapa allt med DOM-scripting som du föreslog. Det jag vill göra nu är att först skapa en dt-tagg, sen appenda en bold-tag (hur funkar stängning av bold där?), sen appenda text (eller kanske sätta texten med innerHTML). Koden nedan körs utan fel men inte blir texten bold. Varför? När jag fått kläm på det ska jag göra det till en komplett, klickbar länk (i bold) är tanken.

function addMenuItem(item, theURL) {
   var menuElement = document.getElementById("menu");

   if (menuElement == null) {
      alert("Failed obtain element with id menu.");
      return; // We don't want to continue executing if we failed to obtain the menu element
   }

   var dt_elem = document.createElement("dt");

   if (dt_elem == null) {
      alert("dt_elem is null");
      return;
   }

   dt_elem.appendChild(document.createElement("B"));
   dt_elem.appendChild(document.createTextNode('Should be bold'));

   menuElement.appendChild(dt_elem);
}

Ok, uppdatering, den här koden visar texten i bold, men det blir ingen länk av det hela. Känns som jag är nära en lösning nu!

function addMenuItem(item, theURL) {
   var menuElement = document.getElementById("menu");

   if (menuElement == null) {
      alert("Failed obtain element with id menu.");
      return; // We don't want to continue executing if we failed to obtain the menu element
   }

   var dt_elem = document.createElement("dt");

   if (dt_elem == null) {
      alert("dt_elem is null");
      return;
   }

   var b_elem = document.createElement("B");

   if (b_elem == null) {
      alert("b_elem is null");
      return;
   }

   var ahref_elem = document.createElement("A");

   if (ahref_elem == null) {
      alert("ahref_elem is null");
      return;
   }

   ahref_elem.setAttribute('href', 'http://localhost/simple.html');
   
   dt_elem.appendChild(b_elem);
   dt_elem.appendChild(ahref_elem);
   b_elem.appendChild(document.createTextNode('Should be bold'));
   
   menuElement.appendChild(dt_elem);
}

Inga fel när den körs, den beter sig bara inte som jag vill, hehe.

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av hivemind
Koden nedan körs utan fel men inte blir texten bold. Varför?

   dt_elem.appendChild(document.createElement("B"));
   dt_elem.appendChild(document.createTextNode('Should be bold'));

Texten blir inte fet för att den inte läggs till i <b>-elementet alls. Istället hamnar den på samma nivå:

<dt>
   <b></b>
   Should be bold
<dt>

Istället får man göra något åt detta hållet:

var b_elem = document.createElement("b");
b_elem.appendChild(document.createTextNode("Should be bold"));

dt_elem.appendChild(b_elem);

Är ingen expert så det finns säkert ett smidigare sätt.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Kolla min editerade reply.

Följande skapar en länk, fast den blir inte bold (koden ovan skapar en bold sträng, men ingen länk). Suck, jag vill ha en bold länk! 

function addMenuItem(item, theURL) {
   var menuElement = document.getElementById("menu");

   if (menuElement == null) {
      alert("Failed obtain element with id menu.");
      return; // We don't want to continue executing if we failed to obtain the menu element
   }

   var dt_elem = document.createElement("dt");

   if (dt_elem == null) {
      alert("dt_elem is null");
      return;
   }

   var b_elem = document.createElement("B");

   if (b_elem == null) {
      alert("b_elem is null");
      return;
   }

   var ahref_elem = document.createElement("A");

   if (ahref_elem == null) {
      alert("ahref_elem is null");
      return;
   }

   ahref_elem.setAttribute("href", "http://localhost/simple.html");
   ahref_elem.appendChild(document.createTextNode('Should be bold')); // or set innerHTML to this string
   
   dt_elem.appendChild(b_elem);
   dt_elem.appendChild(ahref_elem);
   
   menuElement.appendChild(dt_elem);
}

Edit igen: Problemet löst!

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●

Bara så ingen ska leta sig galen efter en lösning på problemet (som jag inte ser någon i koden i sista inlägget).

När man DOM-scriptar så jobbar man med ett träd, alltså behöver man inte bry sig om stängning av taggar för det finns inga taggar egentligen utan bara noder i ett träd (läs lite om träd så förstår ni hur det fungerar).

Anledningen till att koden i inlägget ovanför inte ger fetstil på länken är för att båda dessa element ligger på samma nivå, b-elementet (eller strong som man helst ska använda) måste vara child till a.

Visa signatur

RTFM - vacker sak att säga till folk som ställer dumma frågor

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara