19 svar
42 visningar
CsharpStudent är nöjd med hjälpen
CsharpStudent 79
Postad: 22 sep 2023 14:10

lägga till paragraf till tom body med javascript

Hej, med hjälp av javaScript ska jag kunna skapa en <div> med mitt namn i <body>.

<body> skall vara tom. Vi ska alltså inte skriva något i html-filen.

Jag har kollat alla tänkbara videos för hur man skapar paragraf och text med javascript DOM. Jag känner att jag saknar en del kunskap som gör att jag inte förstår helt. Jag vet att jag kan lokalisera element med .getElementByTagName; jag vet att jag kan skapa paragraf och text enligt nedan. Men det funkar inte och jag vet inte hur jag ska ta mig vidare. Alla tips mottages för att jag ska kunna förstå hur man gör och varför. 


//Skapar en paragraf
const para = document.createElement("p");

//skapar en text node
const node = document.createTextNode("Lorem...");
para.appendChild(node);

const element = document.getElementByTagName("body");
element.appendChild(para);
CurtJ 1103
Postad: 22 sep 2023 14:19

Du har ju alla verktyg i ditt  exempel

document.createElement skapar ett element och vill du skapa en div så kör du

let divelement = document.createElement("div")

Vill du nu sätta ditt namn i div'en så är det div'ens attribut innerHtml

divelement.innerHtml = "ditt namn"

Sen måste du hänga in div'en i trädet och är det översta nivån så använder du appendChild

document.body.appendChild(divelement)

Något sånt... 

CurtJ 1103
Postad: 22 sep 2023 14:23

Komplettering: Det går lika bra att använda createTextNode som innerHtml som du har i ditt exempel. 

CsharpStudent 79
Postad: 22 sep 2023 14:28

Tack för hjälpen. Jag lyckas skapa divelementet och hänga in den i trädet, men när jag kollar HTML tree generator tycks den hamna innanför <script tag, där jag länkat in index.js filen. Det ser inte ut att spela någon roll, men jag antar att det gör det.

CurtJ 1103
Postad: 22 sep 2023 14:30

Kan du visa koden och en skärmdump på din trädgenerator så kanske jag kan hjälpa dig

CsharpStudent 79
Postad: 22 sep 2023 14:38

CurtJ 1103
Postad: 22 sep 2023 14:41

Kan tyvärr inte läsa din bild. Kan du öka upplösningen? 

CsharpStudent 79
Postad: 22 sep 2023 14:41

vänta man ser inget ska testa igen

CsharpStudent 79
Postad: 22 sep 2023 14:44

CurtJ 1103
Postad: 22 sep 2023 14:46

Du har gjort rätt och i trädet ligger din div mellan två script-block. Du kan säkert se vad de innehåller genom att markera eller dubbelklicka på dem?

CurtJ 1103
Postad: 22 sep 2023 14:46

och om du markerar blocket "BODY" så ser du att den har tre "barn"

CsharpStudent 79
Postad: 22 sep 2023 14:48

ååhh jag fattar nu. Jag är helt ny på JavaScript biten så det är lite förvirrande emellanåt. Klart att diven visas innanför script, eftersom det är där den är skapad. Jag vet inte varför jag tänkte att den skulle synas i HTML filen som en <div i body som det annars gör när man skriver HTML. Tack för hjälpen och tålamodet.

CurtJ 1103
Postad: 22 sep 2023 14:50

Javascript ÄR förvirrande ibland men väldigt användbart när man blir lite varm i kläderna. 

Kan du visa index.html? 

CsharpStudent 79
Postad: 22 sep 2023 14:54

CsharpStudent 79
Postad: 22 sep 2023 14:56

Ja jag hoppas jag knäcker koden snart för hur jag ska tänka i js.

CurtJ 1103
Postad: 22 sep 2023 15:20

Jag vet inte vad din HTML-generator visar men den "borde" visa HTML (som är documentet) och under det en Head (som den gör) och en Body (som den också gör) . Under Body borde den visa ett script-block och ditt div-block. Din js-kod ligger i ett av scriptblocken och den div den skapat representeras av DIV-blocket. Vad det andra Script-blocket gör där förstår jag inte. Kan du markera den alt. dubbelklicka på den och se om du får fram mer information? 

CurtJ 1103
Postad: 22 sep 2023 15:25

Så här ser det ut i Firefox inspektör och det borde det nog göra i din trädbrowser också. 

CsharpStudent 79
Postad: 22 sep 2023 15:29

Jag kollade i inspect

CurtJ 1103
Postad: 22 sep 2023 15:31

Ja där har du svaret ( Code injected by live-server). 

Då är du på banan. Lycka till med js och vi finns här om du behöver mer hjälp

CsharpStudent 79
Postad: 22 sep 2023 15:35

ahaa okej då förstår jag. Tack så jättemycket för all hjälp.

Svara Avbryt
Close