[Tutorial JS] createElement si insertBefore

#1
Nume Tutorial: createElement si insertBefore
Descriere: createElement si insertBefore
Download:
Autor: Anonim
Sursa (Link-ul oficial):
tutorialeonline
Propria parere: Folositor.
Tutorialul:

createElement() si insertBefore() sunt două funcţii (metode) JavaScript care sunt folosite pentru a adăuga elemente noi în pagină, care sunt create dinamic cu JavaScript. De obicei aceste funcţii sunt folosite împreună.
1. createElement("tag")

Crează obiectul elementului specificat la parametrul "tag".
Sintaxa generală este următoarea:

document.createElement("tag");

- Unde "tag" este denumirea (selectorul) elementului HTML care se doreşte să fie creat.
- De exemplu: pentru <p> paramerul va fi "p", pentru <div> parametrul va fi "div", iar pentru o căsuţa <input> se specifică "input".
Iată un exemplu în care este creat tag-ul <h3>

Cod: Selectaţi tot

 var element = document.createElement("h3");
- "element" este variabila ce stochează obiectul elementului creat. Odată creat acest element, îi putem adăuga atribute şi conţinut. Pentru aceasta i se aplică funcţiile specifice, "setAttribute()" (sau "className" pt. class) şi "innerHTML". De exemplu, îi adăugăm o CLASA şi un text.

Cod: Selectaţi tot

 <script type="text/javascript">
    var element = document.createElement("h3");
    element.className = "o_clasa";
    element.innerHTML = 'Textul din eticheta H3 creata dinamic';
 </script>
- Acest cod va crea un obiect "element" ce conţine următorul cod HTML
"<h3 class="o_clasa">Textul din eticheta H3 creata dinamic</h3>".
- Similar pot fi create şi alte tag-uri (elemente) HTML, pentru un <div>, în loc de "h3" scrieţi "div", şi tot aşa pt. "span", "br", "li", ... etc.
Acum trebuie doar adăugat în pagină, în locul unde dorim. Pentru aceasta se poate folosi metoda "insertBefore()", prezentată în continuare.
2. insertBefore()

Adaugă un obiect imediat înaintea altui obiect luat ca referinţă, ambii în interiorul unui element părinte.
Sintaxa generală este următoarea:

parinte.insertBefore(element_nou, referinta);

- "element_nou" este obiectul cu elementul pe care dorim să-l adăugăm.
- "referinta" este obiectul înaintea căruia va fi adăugat "element_nou".
- "parinte" este elementul părinte, în care se află "referinta" şi unde va fi adăugat şi "element_nou"
- Dacă "referinta" are valoarea null, "element_nou" va fi adăugat la sfarşitul listei nod-urilor copil din "parent", devenind astfel ultimul nod copil al acestuia.

Iată un exemplu din care să înţelegeţi mai bine. Ca element nou ce va fi adăugat este folosit elementul creat mai sus, la primul subcapitol.
La click pe un buton, va fi adăugat tag-ul H3 creat mai sus, înaintea unui anume DIV (cu id="rpr")

Cod: Selectaţi tot

<script type="text/javascript">
    <!--
    // Functia ce creaza noul element si-l adauga inaintea unui cadru cu id="rpr"
    function add_h3() {
       // Creaza noul element H3 si ii adauga o clasa si continut
       var element = document.createElement('h3');
       element.className = 'o_clasa';
       element.innerHTML = 'Textul din eticheta H3 creata dinamic'
 
       // Creaza obiectul cu elementul de reper (Adaugati-i si valoarea null pentru a vedea diferenta)
       var reper = document.getElementById('rpr');
 
       // Adauga elementul nou inaintea celui de reper
       // Parinte este body
       document.body.insertBefore(element, reper);
    }
    //-->
 </script>
 
 <div id="rpr">Elementul de reper</div>
 <form action=""><input type="button" value="Click" onclick="add_h3()" /></form> 
- Când apăsaţi pe butonul "Click", se apelează funcţia "add_h3()" care va crea automat elementul <h3>, cu textul şi clasa precizate, apoi îl va include/afişa înaintea tag-ului cu id="rpr".
- Dacă elementul părinte nu e BODY, ci un alt DIV, TABLE ori altceva, îl preluaţi mai întâi într-un obiect (ex.: parinte=document.getElementById('id_parinte');) apoi îl includeţi în formula cu "parinte.insertBefore()".
3. Adăugare automată input (căsuţe) în formular

Iată un exemplu practic şi util de folosire a metodelor createElement() şi insertBefore() pentru a adăuga automat căsuţe text într-un formular.
Explicaţiile necesare sunt în codul scriptului.

Cod: Selectaţi tot

 <script type="text/javascript">
    <!--
    // Functia creaza elementul input si-l adauga inaintea butonului Submit
    function add_input() {
       // Seteaza noul element input, cu atributul type=text si name=nume[]
       var new_input = document.createElement("input");
       new_input.setAttribute("type", "text");
       new_input.setAttribute("name", "nume[]");
       new_input.style.display = 'block';             // Seteaza display:block; pt. a
          //   afisa casutele unele sub altele
 
       // Seteaza obiectele cu elementul de reper (Submit) si cadru parinte
       var reper = document.getElementById('submit');
       var parinte = reper.parentNode;
 
       // Adauga elementul nou inaintea celui de reper
       parinte.insertBefore(new_input, reper);
    }
    //-->
 </script>
 
 <form action="">
    <input type="text" name="nume[]" />
    <input type="submit" value="Submit" id="submit" /><br /><br />
    <input type="button" value="Adauga caseta" onclick="add_input()" />
 </form>
- Când daţi click pe butonul "Adauga caseta", se apelează funcţia "add_input()", aceasta va crea şi adăuga caseta de text.
- Am adăugat la atributul "name" valoarea "nume[]" (cu paranteze pătrate) deoarece, în general, datele sunt trimise la un script pe server şi astfel pot fi prelucrate ca o matrice.

Înapoi la “Tutoriale JS”

Cine este conectat

Utilizatori răsfoind acest forum: Niciun utilizator înregistrat și 2 vizitatori

cron