12B Új elem létrehozása - createElement() és appendChild() metódusok

 A createElement és appendChild metódusok a JavaScript DOM manipulációjának alapvető eszközei. Segítségükkel új HTML elemeket hozhatunk létre és adhatunk hozzá a meglévő dokumentumhoz.

createElement metódus

A createElement metódus egy új HTML elemet hoz létre, amelyet később hozzáadhatunk a DOM-hoz. A metódusnak egy paramétere van: az új elem típusának neve (pl. div, p, span stb.).

Szintaxis:

let újElem = document.createElement("elemNév");

Példa:

let újDiv = document.createElement("div");

Ez a kód létrehoz egy új <div> elemet, amely jelenleg csak egy JavaScript változóban létezik, és még nincs hozzáadva az oldalhoz.

appendChild metódus

Az appendChild metódus segítségével egy már létező HTML elemhez adhatunk egy új elemet (például azt, amelyet a createElement-tel hoztunk létre). Az appendChild a szülő elemhez hozzáad egy gyermeket, amely a szülő elem utolsó gyermekeként jelenik meg.

Szintaxis:

szülőElem.appendChild(gyerekElem);

Példa:

let újDiv = document.createElement("div"); // új div létrehozása
újDiv.textContent = "Ez egy új div elem"; // tartalom hozzáadása a div-hez
document.body.appendChild(újDiv); // a div hozzáadása a dokumentum törzséhez (body)

Ebben a példában a createElement létrehoz egy <div> elemet, amelynek beállítjuk a textContent tulajdonságát, majd az appendChild metódussal hozzáadjuk a dokumentum törzséhez, így az megjelenik az oldalon.

Gyakorlati példa - Egy listaelemek hozzáadása egy üres <ul>-hez:

// Egy <ul> elem létrehozása
let ulElem = document.createElement("ul");

// Egy tömb, amelyből listaelemeket hozunk létre
let elemek = ["Elem 1", "Elem 2", "Elem 3"];

// Listaelemek hozzáadása a <ul>-hez
elemek.forEach(elemTartalom => {
    let liElem = document.createElement("li"); // új <li> elem létrehozása
    liElem.textContent = elemTartalom; // tartalom hozzáadása
    ulElem.appendChild(liElem); // <li> hozzáadása a <ul>-hez
});

// A <ul> elem hozzáadása a dokumentum törzséhez
document.body.appendChild(ulElem);

Ez a kód létrehoz egy <ul> elemet, amelyhez három <li> elemet fűz hozzá, majd a teljes <ul> elemet hozzáadja az oldalhoz.

https://www.w3schools.com/jsref/met_document_createelement.asp

https://www.w3schools.com/jsref/met_node_appendchild.asp