El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com crear i eliminar elements del Document Object Model (DOM) utilitzant JavaScript. Aquestes habilitats són essencials per a la manipulació dinàmica de pàgines web, permetent-nos afegir, modificar o eliminar contingut de manera interactiva.

Conceptes Clau

DOM (Document Object Model): És una representació estructurada del document HTML que permet a JavaScript accedir i manipular el contingut, estructura i estil de la pàgina web.
Creació d'Elements: Utilitzem el mètode document.createElement() per crear nous elements HTML.
Afegir Elements al DOM: Utilitzem mètodes com appendChild(), insertBefore(), i append() per inserir els elements creats al DOM.
Eliminació d'Elements: Utilitzem el mètode removeChild() o remove() per eliminar elements del DOM.

Creació d'Elements

`document.createElement()`

Aquest mètode crea un nou element HTML especificat pel seu nom de tag.

// Crear un nou element <div>
let newDiv = document.createElement('div');

Afegir Contingut a l'Element

Podem afegir text o altres elements al nou element creat.

// Afegir text al nou <div>
newDiv.textContent = 'Hola, sóc un nou div!';

Afegir Atributs a l'Element

Podem afegir atributs com classes, id, etc.

// Afegir una classe al nou <div>
newDiv.className = 'nou-div';

Afegir Elements al DOM

`appendChild()`

Aquest mètode afegeix un node com a últim fill d'un node pare especificat.

// Seleccionar un element existent al DOM
let container = document.getElementById('container');

// Afegir el nou <div> com a fill del container
container.appendChild(newDiv);

`insertBefore()`

Aquest mètode insereix un node abans d'un node de referència especificat.

// Seleccionar un element existent al DOM
let referenceNode = document.getElementById('reference');

// Inserir el nou <div> abans del node de referència
container.insertBefore(newDiv, referenceNode);

`append()`

Aquest mètode afegeix un node o text com a últim fill d'un node pare especificat. A diferència de appendChild(), append() pot afegir múltiples nodes i text.

// Afegir el nou <div> i text al container
container.append(newDiv, 'Text addicional');

Eliminació d'Elements

`removeChild()`

Aquest mètode elimina un node fill d'un node pare especificat.

// Seleccionar un element existent al DOM
let elementToRemove = document.getElementById('element-to-remove');

// Eliminar l'element
container.removeChild(elementToRemove);

`remove()`

Aquest mètode elimina l'element del DOM directament.

// Seleccionar un element existent al DOM
let elementToRemove = document.getElementById('element-to-remove');

// Eliminar l'element
elementToRemove.remove();

Exemple Pràctic

A continuació, es mostra un exemple complet que crea un nou element, l'afegeix al DOM i després l'elimina.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulació del DOM</title>
</head>
<body>
    <div id="container">
        <p id="reference">Aquest és un paràgraf de referència.</p>
    </div>

    <script>
        // Crear un nou element <div>
        let newDiv = document.createElement('div');
        newDiv.textContent = 'Hola, sóc un nou div!';
        newDiv.className = 'nou-div';

        // Seleccionar el container
        let container = document.getElementById('container');

        // Afegir el nou <div> al container
        container.appendChild(newDiv);

        // Eliminar el nou <div> després de 3 segons
        setTimeout(() => {
            newDiv.remove();
        }, 3000);
    </script>
</body>
</html>

Exercicis Pràctics

Exercici 1: Crear i Afegir un Element

Crea un nou element <p> amb el text "Aquest és un nou paràgraf".
Afegeix aquest nou paràgraf a un element existent amb l'id content.

Solució

let newParagraph = document.createElement('p');
newParagraph.textContent = 'Aquest és un nou paràgraf';
let content = document.getElementById('content');
content.appendChild(newParagraph);

Exercici 2: Eliminar un Element

Selecciona un element amb l'id to-remove.
Elimina aquest element del DOM.

Solució

let elementToRemove = document.getElementById('to-remove');
elementToRemove.remove();

Resum

En aquesta secció, hem après com crear i eliminar elements del DOM utilitzant JavaScript. Hem vist com utilitzar mètodes com document.createElement(), appendChild(), insertBefore(), append(), removeChild() i remove(). Aquests coneixements són fonamentals per a la manipulació dinàmica de pàgines web, permetent-nos afegir, modificar o eliminar contingut de manera interactiva.

Creació i Eliminació d'Elements del DOM

Conceptes Clau

Creació d'Elements

`document.createElement()`

Afegir Contingut a l'Element

Afegir Atributs a l'Element

Afegir Elements al DOM

`appendChild()`

`insertBefore()`

`append()`

Eliminació d'Elements

`removeChild()`

`remove()`

Exemple Pràctic

Exercicis Pràctics

Exercici 1: Crear i Afegir un Element

Solució

Exercici 2: Eliminar un Element

Solució

Resum

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final