Hjälp med javascript/DOM krångel

Hej!

Det är så att jag har precis börjat med javascript/DOM osv. har fått en uppgift i skolan där vi ska skriva ut en h2 tag till ett html document via js.

let hElements = document.getElementsByTagName('h2')

let text = document.createTextNode('This is a sub headline')

let threeTag = document.querySelector('#step03')

threeTag.appendChild(hElements)

Så har jag testat men fungerar inte riktigt, tar jag bort let text = document.createTextNode('This is a sub headline') detta och skriver en h2 tag i html filen med texten i så fungerar det, men tror att läraren vill att vi ska kunna eller ska skriva ut det via js filen om det går.

som här t.ex, detta är första uppgiften

let MyText = document.createTextNode('Hello World!')

let pTag = document.querySelector('#step01_hello')

pTag.appendChild(MyText)

Men vet inte riktigt hur jag ska göra för att få in en h2 tag i den första koden jag skrev längst upp. Har ni tips på vad som är felet och hur man kan göra?

Kollar man på https://developer.mozilla.org/en-US/.../createElement ser det ut som exemplet är precis vad du vill göra.

Tricket är ju alltså att först skapa ett DOM-h2-elemet, i detta element lägga till en textnod, och sedan ta h2-elementet och stoppa i det på lämpligt ställe i DOMen.

Tack, löste det.
This is a sub headline
Exercise 2
Create a h2-elemenet containing the text "This is a sub headline" and put it after the p-elemenet containing this text.

problemet är att jag ska försöka få den under p-elementet. Vet du hur man löser detta? som du ser nu så är den över Exercise 2(h2 element också fast skriven i html filen).

Kolla på https://stackoverflow.com/questions/...cript-tag-so-i, där vill man ha in saker efter något.

Fasen, har kollat o kollat men får inte till det. Min kod ser ut så här just nu

let newH2 = document.createElement('h2')

let newContent = document.createTextNode('This is a sub headline')

newH2.appendChild(newContent)

let currentDiv = document.getElementById('step02')
document.body.insertBefore(newH2, currentDiv)

Har ingen p-tag i koden i js, men finns en div och en p-tag i html koden, där jag vill att min js kod med h2 elementet ska hamna underst, alltså under p-tagen :/

hur ser din html och js ut nurå? Vad är "step02" för id?

oj sorry glömt att visa html koden

<div id="step02">
<h2>Exercise 2</h2>
<p>
Create a h2-elemenet containing the text "This is a sub headline" and put it
after the p-elemenet containing this text.
</p>

</div>

js kod


// Uppgift 2
let newH2 = document.createElement('h2')

let newContent = document.createTextNode('This is a sub headline')

newH2.appendChild(newContent)

let currentDiv = document.getElementById('step02')
document.body.insertBefore(newH2, currentDiv)

I första fallet försöker du välja alla h2 element, sen hänga in dem som child-noder under ett annat element som du också väljer ut med en query (alltså båda två måste finnas i DOM trädet redan).

I det andra exemplet skapar du först en DOM nod i JavaScript sen hänger in den i DOM trädet.

Stor skillnad i dessa fall.

Det första fallet är något man inte direkt gör, att söka upp en DOM nod sen direkt sätta dom som Child till en annan nod.

Antingen skapar man nya noder (ditt exempel #2) och hänger in dem där de skall vara. Eller så tar man först bort en nod där den hänger för tillfället, och sen hänger in den där den skall vara:
https://www.w3schools.com/js/js_htmldom_nodes.asp

Det där blir lite knasigt då du försöker sätta in din H2 nod _före_ själva DIV noden. Medans uppgiften är att sätta in din H2 som sista child-node inuti DIV noden:

let currentDiv = document.getElementById('step02')
currentDiv.appendChild(newH2)

Detta bör placera din nya H2 nod sista av alla child-nodes under DIV noden.

Tack så mycket, löste sig

Tänkte en sak till, om man nu skulle vilja få den under t.ex den 5:e h2 taggen i html sidan.

Är det t.ex då currentDiv.appendChild(newH2[6])

eller hur skulle jag kunna räkna ner den så den hamnar under det 5:e h2 taggen?

newH2[6] är syntax för en Array, vilket inte newH2 är (den är av typen Node)
Så det blir lite bakvänt.

Men du behöver 2st steg från Node objektet för att arbiträrt stoppa in saker på rätt index (index = array position).

Först sparar du en Array (lista) över alla Child Nodes som din DIV har.
Sist stoppar du in på rätt position.

let children= currentDiv.childNodes()
let insertedNode = currentDiv.insertBefore(newH2, children[5])

(https://developer.mozilla.org/en-US/...ode/childNodes)
(https://developer.mozilla.org/en-US/...e/insertBefore)

Obs 1: children[5] är 6:e objektet då en Array börjar att räkna första index positionen som 0

Obs 2: Det kanske känns lite bakvänt att man först måste ta fram en lista med referenser till alla Child Nodes, sen välja ut den man vill sätta in framför som argument till insertBefore.

Detta är inte helt lätt att förstå exakt varför det funkar så i ett språk som JavaScript som är byggt över en renderingsmotor när man börjar. Men lär dig bara "att så här funkar det" tills vidare så kommer du en dag börja ljusna mer på djupet.