createElement si insertBefore 14
createElement() si insertBefore() sunt doua functii (metode) JavaScript care sunt folosite pentru a adauga elemente noi in pagina, care sunt create dinamic cu JavaScript. De obicei aceste functii sunt folosite impreuna.
1. createElement(„tag”)
Creaza obiectul elementului specificat la parametrul „tag”.
Sintaxa generala este urmatoarea:
- document.createElement(„tag”);
– Unde „tag” este denumirea (selectorul) elementului HTML care se doreste sa fie creat.
– De exemplu: pentru <p> paramerul va fi „p”, pentru <div> parametrul va fi „div”, iar pentru o casuta <input> se specifica „input”.
Iata un exemplu in care este creat tag-ul <h3>
var element = document.createElement(„h3”);
– „element” este variabila ce stocaheaza obiectul elementului creat.
Odata creat acest element, ii putem adauga atribute si continut. Pentru aceasta i-se aplica functiile specifice, „setAttribute()” (sau „className” pt. class) si „innerHTML” (sunt prezentate in Lectia 28).
De exemplu, ii adaugam o CLASA si un text.
<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 contine urmatorul cod HTML
„<h3 class=”o_clasa”>Textul din eticheta H3 creata dinamic</h3>„.
– Similar pot fi create si alte tag-uri (elemente) HTML, pentru un <div>, in loc de „h3” scrieti „div”, si tot asa pt. „span”, „br”, „li”, … etc.
Acum trebuie doar adaugat in pagina, in locul unde dorim. Pentru aceasta se poate folosi metoda „insertBefore()”, prezentata in contnuare.
2. insertBefore()
Adauga un obiect imediat inaintea altui obiect luat ca referinta, ambii in interiorul unui element parinte.
Sintaxa generala este urmatoarea:
- parinte.insertBefore(element_nou, referinta);
– „element_nou” este obiectul cu elementul pe care dorim sa-l adaugam.
– „referinta” este obiectul inaintea caruia va fi adaugat „element_nou”.
– „parinte” este elementul parinte, in care se afla „referinta” si unde va fi adaugat si „element_nou”
– Daca „referinta” are valoarea null, „element_nou” va fi adaugat la sfarsitul listei nod-urilor copil din „parent”, devenind astfel ultimul nod copil al acestuia.
Iata un exemplu din care sa intelegeti mai bine. Ca element nou ce va fi adaugat este folosit elementul creat mai sus, la primul subcapitol.
La click pe un buton, va fi adaugat tag-ul H3 creat mai sus, inaintea unui aume DIV (cu id=”rpr”)
<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>
– Cand apasati pe butonul „Click”, se apeleaza functia „add_h3()” care va crea automat elementul <h3>, cu textul si clasa precizate, apoi il va include /afisa inaintea tag-ului cu id=”rpr”. Dupa cum puteti testa mai jos.
Elementul de reper
– Daca elementul parinte nu e BODY, ci un alt DIV, TABLE ori altceva, il preluati mai intai intr-un obiect (ex.: parinte=document.getElementById(‘id_parinte’);) apoi il includeti in formula cu „parinte.insertBefore()”.
3. Adaugare automata input (casute) in formular
Iata un exemplu practic si util de folosire a metodelor createElement() si insertBefore() pentru a adauga automat casute text intr-un formular.
Explicatiile necesare sunt in codul scriptului.
<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>
– Cand dati click pe butonul „Adauga caseta”, se apeleaza functia „add_input()”, aceasta va crea si adauga caseta de text, dupa cum puteti testa mai jos.
– Am adaugat la atributul „name” valoarea „nume[]” (cu paranteze patrate) deoarece, in general, datele sunt trimise la un script pe server si astfel pot fi prelucrate ca o matrice.