Descriere: createElement si insertBefore
Download:
Autor: Anonim
Sursa (Link-ul oficial): 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");
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>
"<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>
- 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>
- 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.