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 meta tag se foloseste pentru scurta descriere a paginii?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 caractere ce descriu continutul paginii" />
Ce proprietate CSS opreste efectul dat de "float"?
clear text-align position
#some_id {
  clear: both;
}
Clic pe metoda ce creaza un array cu toate elementele din pagina cu un anumit nume de tag.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);
Indicati functia PHP ce returneaza numarul de elemente dintr-un array.
is_[) count() strlen()
$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "I live (happy)".
happly happily hapily
I live happily.
- Traiesc fericit (in mod fericit).
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "Vivo (feliz)".
felizamente felizmente felices
Vivo felizmente.
- Traiesc fericit (cu fericire).
createElement si insertBefore

Last accessed pages

  1. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (22066)
  2. Gramatica limbii engleze - Prezentare Generala (72291)
  3. Prepozitii - Prepositions (7819)
  4. HTML5 - Elemente si atribute noi in formular (1341)
  5. HTML5 - Tag-uri Noi (1020)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2613)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1259)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (827)
  4. Gramatica limbii spaniole. Indrumator si prezentare generala (807)
  5. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (744)