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.
Creaza obiectul elementului specificat la parametrul "tag".
Sintaxa generala este urmatoarea:
var element = document.createElement("h3");- "element" este variabila ce stocaheaza obiectul elementului creat.
<script type="text/javascript">- Acest cod va crea un obiect "element" ce contine urmatorul cod HTML
var element = document.createElement("h3");
element.className = "o_clasa";
element.innerHTML = 'Textul din eticheta H3 creata dinamic';
</script>
Adauga un obiect imediat inaintea altui obiect luat ca referinta, ambii in interiorul unui element parinte.
Sintaxa generala este urmatoarea:
<script type="text/javascript">- 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.
<!--
// 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>
- 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()".Elementul de reper
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">- 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.
<!--
// 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>