createElement() si insertBefore() sunt doua functii (metode) JavaScript care sunt folosite pentru a adauga elemente noi in pagina HTML, create dinamic cu JavaScript. De obicei aceste functii sunt folosite impreuna.


createElement('tag')

Metoda createElement('tag') creaza in JS un obiect cu elementul HTML specificat la 'tag'.
Sintaxa generala este urmatoarea:

document.createElement('tag')
- Unde 'tag' este denumirea tag-ului pentru elementul care va fi creat (pentru <p> paramerul va fi 'p', pentru <div> parametrul va fi 'div', iar pentru o casuta <input> se specifica 'input').

Obiectul creat cu createElement() reprezinta un element HTML gol in JavaScript. La acesta se poate adauga continut cu innerHTML si atribute cu setAttribute().
Iata un exemplu in care este creat tag-ul <h3> la care se adauga un atribut 'class' si continut.
var elm = document.createElement('h3');
elm.setAttribute('class', 'o_clasa')
elm.innerHTML ='Textul din eticheta H3 creata dinamic';
console.log(elm);
- Acest cod va crea un obiect in JS 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 acest obiect in pagina, in locul unde dorim. Pentru aceasta se poate folosi metoda insertBefore(), prezentata in contnuare.

insertBefore()

Metoda insertBefore() adauga un obiect HTML din JS imediat inaintea altui element din pagina luat ca referinta, din interiorul unui element parinte.
Sintaxa generala este urmatoarea:

parinte.insertBefore(element_nou, referinta);
- 'element_nou' este obiectul din JS cu elementul HTML pe care dorim sa-l adaugam.
- 'referinta' este elementul HTML din pagina 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.
La click pe un buton, va fi adaugat un tag H3 inaintea unui aume DIV (cu id='rpr').
<h4>Exemplu cu insertBefore()</h4>
<p>La click pe urmatorul buton, va fi adaugat un tag H3 creat cu createElement(), inaintea unui DIV cu id='rpr'.</p>
<button id='btn1'>Add H3</button>
<div id='rpr'>#rpr, elementul de reper.</div>

<script>
// 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 elm = document.createElement('h3');
 elm.className ='o_clasa';
 elm.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(elm, reper);
}

document.getElementById('btn1').addEventListener('click', add_h3);
</script>
- Demo:
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()'


Adaugare automata casete input 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.

<h4>Exemplu createElement() si insertBefore()</h4>
<p>La clic pe butonul 'Adauga caseta' se adauga automat cate o casete de text in formular.</p>

<form action='#'>
Text: <input type='text' name='nume[]' />
<input type='submit' value='Submit' id='submit' /><br><br>
<input type='button' id='btn1' value='Adauga caseta' />
</form>

<script>
// 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 elm = document.createElement('input');
 elm.setAttribute('type', 'text');
 elm.setAttribute('name', 'nume[]');
 elm.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(elm, reper);
}

//la click pe #btn1 apeleaza add_input()
document.getElementById('btn1').addEventListener('click', add_input);
</script>
- Demo:
Text:

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag se foloseste in <table> pentru a crea celula de tip "header"?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Ce proprietate CSS seteaza distanta dintre randuri?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Care functie deschide o noua fereastra.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicati functia PHP care returneaza un array cu numele fisierelor si directoarelor dintr-un director.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Care din urmatoarele forme a verbului "sleep" (a dormi) se foloseste pentru viitor?
sleeping slept will sleep
He will sleep there.
- El va dormi acolo.
Care din urmatoarele forme a verbului "dormir" (a dormi) se foloseste pentru viitor?
dormido dormirá durmiendo
Él dormirá allí.
- El va dormi acolo.
createElement si insertBefore

Last accessed pages

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (47096)
  2. Verbe modale - SHALL, SHOULD, OUGHT TO, WILL, WOULD, USED TO, BE TO, DARE (13094)
  3. Numerale, Numere in limba engleza - Numerals (21243)
  4. Anotimpurile si vremea (175)
  5. Obiectul Date - Lucru cu Data si Timp (205)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2780)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1054)
  3. Gramatica limbii spaniole. Indrumator si prezentare generala (857)
  4. Exercitii engleza - English Tests and exercises - Grammar (830)
  5. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (722)