CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede nsm-sg Nybegynder
16. februar 2012 - 16:47 Der er 19 kommentarer

Hvordan erstatter jeg HTML tags med Javascript?

Jeg har brug for lidt hjælp. Hvordan laver jeg en javascript funktion som erstatter noget indenfor nogle HTML tags?

Det konkrete eksempel er at jeg gerne vil erstatte følgende:
<span class="ProductMenu_MenuItemBold">VAREGRUPPE</span>

Så det ser spledes ud:
<span class="ProductMenu_MenuItemBold">- VAREGRUPPE</span>

Altså der skal tilføjes et eller flere tegn til den oprindelige tekst.

Jeg har ikke mulighed for at angive et ID, samt funktionen skal gerne kunne bladre igennem alle <span class="ProductMenu_MenuItemBold"> og angive samme tegn foran teksten, uanset hvad der står indenfor SPAN.


Håber på at nogen af jer kan hjælpe lidt hurtigt :)
Avatar billede olebole Juniormester
16. februar 2012 - 17:02 #1
<ole>

Det er lidt skidt, du kun har et klassenavn at arbejde udfra. Har du ID på et element, de pågældende elementer ligger i, så man kan lave en lidt mere effektiv løsning?

/mvh
</bole>
Avatar billede niklask Nybegynder
16. februar 2012 - 17:42 #2
Det kan vel gøres ved hjælp af jQuery:

$(document).ready(function () {
  var currentText = $(".ProductMenu_MenuItemBold").html();
  $(".ProductMenu_MenuItemBold").html("- " + currentText);
});
Avatar billede niklask Nybegynder
16. februar 2012 - 17:44 #3
Prøvede lige at tilføje flere span tags med forskelligt indhold, det virker ikke. Vender tilbage hurtigst muligt.
Avatar billede niklask Nybegynder
16. februar 2012 - 17:47 #4
Sådan, det skulle virke nu:

$(document).ready(function () {
  $(".ProductMenu_MenuItemBold").each(function (index) {
      $(this).html("- " + $(this).html());
  });
});
Avatar billede olebole Juniormester
16. februar 2012 - 18:01 #5
@niklask: Det var præcis den slags ineffektive løsninger, jeg prøvede at undgå ved at spørge efter det element, spannene ligger i  *o)

En mere effektiv løsning ville være:

var sVal, aSp = document.getElementsByTagName("span");
for (var i=0,j=aSp.length; i<j; i++) {
    if (aSp[i].className==="ProductMenu_MenuItemBold") {
        sVal = aSp[i].firstChild.nodeValue;
        aSp[i].firstChild.nodeValue = "- "+sVal;
    }
}

- men det kan gøres endnu bedre med et svar på mit spørgsmål
Avatar billede niklask Nybegynder
16. februar 2012 - 18:41 #6
#5
Kan du uddybe det? Hvad er der ineffektivt ved denne løsning?
Avatar billede olebole Juniormester
16. februar 2012 - 18:52 #7
Scriptet roder hele dokumentet igennem efter spannene - i stedet for at lede i et enkelt element. Derudover bruger jQuery internt en hel del unødige processer for at gøre det samme, som jeg skrev ovenfor.

Skulle der være oprettet eventhandlers eller andre programmatiske refrencer indenfor spannene, vil disse blive overskrevet. Det kan resultere i, at andre scripts ikke fungerer - og det kan medføre memory leaks. Det skyldes, at jQuery ikke bruger DOM, men innerHTML til at rette indholdet.
Avatar billede olebole Juniormester
16. februar 2012 - 18:57 #8
En forbedring af mit eget eksempel kunne være noget i stil med:

var sVal, aSp = document.getElementById("mitDiv").document.getElementsByTagName("span");

Det er ikke sjældent hurtigere at bruge et library som jQuery - og man behøver ikke lære at programmere for at bruge dem.

Alt har en pris, og prisen er her, at man ikke lærer de mest basale programmeringsprincipper - at koden ofte bliver væsentligt mindre effektiv - samt at man binder sig til kun at kode gennem librariet.
Avatar billede niklask Nybegynder
16. februar 2012 - 19:12 #9
Mange tak for det. Man lærer noget nyt hver dag ;)
Avatar billede olebole Juniormester
16. februar 2012 - 19:22 #10
Selvtak. Hvis der er en mening med livet, må det være at lære hver dag ... hele livet  *o)
Avatar billede nsm-sg Nybegynder
16. februar 2012 - 20:05 #11
@olebole: Det tætteste ID jeg har i koden er den tabel som alle disse SPAN ligger i.

<table id="ProductMenu_Table" border="0" cellspacing="0" cellpadding="0" width="100%">

Kan det ID bruges og har du en brugbar kode jeg kan afprøve?
Avatar billede olebole Juniormester
16. februar 2012 - 20:32 #12
Ja:

var sVal, aSp = document.getElementById("ProductMenu_Table").document.getElementsByTagName("span");
for (var i=0,j=aSp.length; i<j; i++) {
    if (aSp[i].className==="ProductMenu_MenuItemBold") {
        sVal = aSp[i].firstChild.nodeValue;
        aSp[i].firstChild.nodeValue = "- "+sVal;
    }
}

- og det skal køres på onload - eller du kan lægge scriptet i bunden af siden eller i hvertfald efter tabellen.
Avatar billede nsm-sg Nybegynder
16. februar 2012 - 21:05 #13
Men hvis jeg ikke kan lave en onload i body, hvordan kan jeg så aktivere denne?
Avatar billede olebole Juniormester
16. februar 2012 - 21:32 #14
Du kan skrive sådan:

function handleSpans() {
    var sVal, aSp = document.getElementById("ProductMenu_Table").document.getElementsByTagName("span");
    for (var i=0,j=aSp.length; i<j; i++) {
        if (aSp[i].className==="ProductMenu_MenuItemBold") {
            sVal = aSp[i].firstChild.nodeValue;
            aSp[i].firstChild.nodeValue = "- "+sVal;
        }
    }
}
if (window.addEventListener) window.addEventListener("load", handleSpans, false);
else window.attachEvent("onload", handleSpans);

- hvilket er en lidt pænere måde at få noget afviklet på onload
Avatar billede nsm-sg Nybegynder
16. februar 2012 - 21:41 #15
Hmm... der sker umiddelbart ikke noget, uanset om denne kommer i toppen eller i bunden af html siden.

<script type="text/javascript">
function handleSpans() {
    var sVal, aSp = document.getElementById("ProductMenu_Table").document.getElementsByTagName("span");
    for (var i=0,j=aSp.length; i<j; i++) {
        if (aSp[i].className==="ProductMenu_MenuItemBold") {
            sVal = aSp[i].firstChild.nodeValue;
            aSp[i].firstChild.nodeValue = "- "+sVal;
        }
    }
}
if (window.addEventListener) window.addEventListener("load", handleSpans, false);
else window.attachEvent("onload", handleSpans);
</script>

Skal der bruges jQuery til det her?
Avatar billede nsm-sg Nybegynder
16. februar 2012 - 22:10 #16
UPDATE - denne fungerer KUN i IE hvis jeg sætter koden i head, men virker altså IKKE i hverken Firefox eller Chrome.

Nogen idéer til hvad der kan gøres?
Avatar billede olebole Juniormester
16. februar 2012 - 22:53 #17
Sorry! Første linje skal se sådan ud:

var sVal, aSp = document.getElementById("ProductMenu_Table").getElementsByTagName("span");
Avatar billede olebole Juniormester
16. februar 2012 - 22:54 #18
- men du er nødt til at tjekke dine browseres fejlmeddelelser. Ellers kan du ikke webudvikle  *o)
Avatar billede nsm-sg Nybegynder
17. februar 2012 - 05:01 #19
@olebole: Det er meget fornemt. Det hjalp på problemet.
Nu virker det efter hensigten. Smid et svar, så jeg kan give dig point.

Hvis jeg evt. ville ønske at smide et <img> ind foran teksten i <span>, skulle der så en større ændring af koden til?
Lige nu kan jeg se at den blot udskriver koden ude på siden, men ikke fortolker f.eks <br />
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
Returner ikke alt Af ingeman i JavaScript 13 26/06/202414:40 01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript 4 24/06/202422:50 26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript 6 04/06/202416:23 05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript 4 21/05/202417:19 22/06/202422:07
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
26 min siden OBS Studio - digital fnidder ved analog overspilning Af mikedk2100 i Andet software
I går 22:23 Dvd-film Af lottefie i PC
I går 20:49 Hjælp til nyt netværkskort Af m23226 i PC
I går 18:21 Jeg skal have ny skærm og kunne godt bruge imput fra andre. Af Peter Højer Barker i Skærme
I går 12:51 Hitachi model Axm709e musik anlæg vil ikke afspille cd med lyd Af made18 i Musik & videoafspillere
White papers
Flere white papers »


Premium
Teaser billede
Her blev Silicon Valley født: Kom med ind i den lille garage i en baghave i San Francisco, hvor det hele tog sin begyndelse
Læs mere »
Ambitiøst udspil fra telebranchen: Danmarks digitale infrastruktur trænger til et kæmpe løft og noget politisk kærlighed
Rejsekort ændrer i planerne: Fremover skal du kunne tjekke ind og ud med NFC og betalingskort
MitID misser krav om oppetid i næsten hver anden måned
Se alle »
Computerworld
Teaser billede
Test: iPhone 16 Pro Max er den bedste iPhone til dato - men du bør spare de næsten 12.000 kroner, som den koster
Læs mere »
Nu kan du få fingrene i den nyeste version af Windows: Sådan gør du
Tesla har med vilje gjort ladetiden dårligere med software-opdatering - skal nu betale erstatning til Tesla-ejere
Kvinde bortvist: Kaldte sin arbejdsgiver for inkompetent, doven, nasser og tyveknægt i lukket gruppe på Facebook
Se alle »
CIO
Teaser billede
Windows-opdatering kan få din pc til at crashe helt: Men du kan nemt løse problemet
Læs mere »
Vi er nået til et sted, hvor alle generalister får baghjul og ikke længere kan være med
Advarsel til brugere af Copilot: En kompromittering af en enkelt medarbejder kan koste dyrt, hvis ikke du passer på
IBM og Oracle vinder kæmpe ERP-aftale: Skal servicere 280.000 brugere
Se alle »
Job & Karriere
Teaser billede
Pludselig exit fra Schultz kom som en overraskelse for Merete Søby: Derfor stoppede samarbejdet
Læs mere »
Merete Søby fratræder med omgående virkning som CEO for Schultz efter blot tre måneder på posten
Professor: "Det er på høje tid at opløse virksomhedernes it-afdelinger"
Kom tæt på Danmarks nye digitaliserings-minister: 33-årige Caroline Stage Olsen er tidligere tobaks-lobbyist - har været aktiv i politik siden hun var helt ung
Se alle »
White paper
Teaser billede
MDR: Transparent sikkerhed og overvågning i realtid
Læs mere »
Rapport kortlægger de 13 bedste muligheder for at sætte turbo på din cloud computing
Det behøver ikke at gøre ondt: Sådan gør du livet lettere for kunder med multicloud
Nemmere overblik, styring og omkostningskontrol i dit multicloud-miljø
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »