Manipulera html med Javascript DOM
Hej,
Är helt ny inom Javascript och har en uppgift där jag med javascript ska manipulera en html fil.
Jag har fastnat på en utav uppgifterna och vet inte hur jag ska lösa den trots oändligt sökande på youtube, så är tacksam för all hjälp jag kan få!
För den här delen så behöver vi fortsätta arbeta med selektorer och loopar. Din uppgift är att skapa länkar utifrån navigations-listans <li> element och dess text. <li class="navigation">HTML</li> ska alltså ändras till att vara
<li class="navigation><a href="#HTML">HTML</a></li> och så vidare för de tre <li> elementen.
Html koden
<nav>
<ul>
<li class="navigation">HTML</li>
<li class="navigation">DOM</li>
<li class="navigation">Javascript</li>
</ul>
</nav>
Jag har endats fångat upp klassnamnet som nedan men vet inte hur jag ska lösa uppgiften.. hoppas någon kan hjälpa mig!
var nav = document.getElementsByClassName('navigation');
Du är på rätt väg. Försök att först gå igenom listan och skriva ut innehållet så du ser att du träffat rätt element -- det behöver du för att veta att du har rätt data för att skapa de nya elementen som du ska ersätta de gamla med.
PeBo skrev:Du är på rätt väg. Försök att först gå igenom listan och skriva ut innehållet så du ser att du träffat rätt element -- det behöver du för att veta att du har rätt data för att skapa de nya elementen som du ska ersätta de gamla med.
tack! Skulle jag exp använda remove för att ta bort de 3 li taggar som finns och sedan skapa nya typ såhär?:
const nav = document.createElement('li');
const länk = document.createElement('href');
li.appendChild(länk);
Du lurar dig själv lite när du i din exempelkod säger "var nav =", för det din getElementsByClassName ger dig är en array (lista) av element (notera plural-s:et på 'Elements' -- vissa andra metoder i samma familj ger bara ett element; se t.ex ), där varje sånt element är en <li>, och det är kanske inte så förvånande. Av det skälet behöver du inte skapa något li-element (och din kod är lite förvirrad där också -- du skapar 'li', men kallar den 'nav', och du behöver nog skapa ett 'a' element med ett attribut "href", inte ett 'href' element). Du behöver också först läsa ut texten som är "innerText" från din list item och sen bygga ett 'a' och ta bort innehållet i din befintliga <li> och ersätta med den 'a' du skapat.
PeBo skrev:Du lurar dig själv lite när du i din exempelkod säger "var nav =", för det din getElementsByClassName ger dig är en array (lista) av element (notera plural-s:et på 'Elements' -- vissa andra metoder i samma familj ger bara ett element; se t.ex ), där varje sånt element är en <li>, och det är kanske inte så förvånande. Av det skälet behöver du inte skapa något li-element (och din kod är lite förvirrad där också -- du skapar 'li', men kallar den 'nav', och du behöver nog skapa ett 'a' element med ett attribut "href", inte ett 'href' element). Du behöver också först läsa ut texten som är "innerText" från din list item och sen bygga ett 'a' och ta bort innehållet i din befintliga <li> och ersätta med den 'a' du skapat.
hmm okej.. skulle du kunna visa ett exempel så att jag förstår hur du menar?
Visa spoiler
<html>
<head>
<script>
function transform(){
let navigationItems = document.getElementsByClassName('navigation')
for (let i = 0; i < navigationItems.length; i++){
let element = navigationItems[i]
let inner = element.innerText
let a = document.createElement('a')
a.setAttribute('href', '#' + inner)
a.innerText = inner
element.innerHTML = ''
element.appendChild(a)
}
}
</script>
</head>
<body onclick=transform()>
<nav>
<ul>
<li class="navigation">HTML</li>
<li class="navigation">DOM</li>
<li class="navigation">Javascript</li>
</ul>
</nav>
</body>
</html>
PeBo skrev:Visa spoiler
<html>
<head>
<script>
function transform(){
let navigationItems = document.getElementsByClassName('navigation')
for (let i = 0; i < navigationItems.length; i++){
let element = navigationItems[i]
let inner = element.innerText
let a = document.createElement('a')
a.setAttribute('href', '#' + inner)
a.innerText = inner
element.innerHTML = ''
element.appendChild(a)
}
}
</script>
</head>
<body onclick=transform()>
<nav>
<ul>
<li class="navigation">HTML</li>
<li class="navigation">DOM</li>
<li class="navigation">Javascript</li>
</ul>
</nav>
</body>
</html>
Tack för att du visar mig ett bra exempel! Jag förstår funktionen och koden bra! En fråga dock, funkar funktionen utan att ha en onclick? Jag får nämligen inte ändra något i html filen utan ska bara genom javascript manipulare html filen. Samt undrar jag denna delen: a.setAttribute('href', '#' + inner) ska den stå för <a href="#HTML"> så att inner står för HTML?
Ja, det funkar utan onclick.
Variabeln "inner" kommer att innehålla texten "HTML", "DOM", och "Javascript" i tur och ordning. Dessa ska ju finnas som länk-text och som en location-href för varje list-item (<li> tag). Länk-texten klistras in genom att sätta innerText och location-referensen genom att sätta href-attributet på anchor-taggen (<a>) som helt oförvånande skapas genom "let a = document.createElement('a')".
PeBo skrev:Ja, det funkar utan onclick.
Variabeln "inner" kommer att innehålla texten "HTML", "DOM", och "Javascript" i tur och ordning. Dessa ska ju finnas som länk-text och som en location-href för varje list-item (<li> tag). Länk-texten klistras in genom att sätta innerText och location-referensen genom att sätta href-attributet på anchor-taggen (<a>) som helt oförvånande skapas genom "let a = document.createElement('a')".
Tack för din hjälp och tack för att du förklarar så jag förstår!
