Curs Javascript


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
Ce atribut e folosit in tag-ul <img> pentru adresa imaginii?
href src rel
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Care din aceste coduri CSS ascunde elementul in pagina?
display: none; display: inline; position: relative;
#id {
  display: none;
}
Ce instructiune opreste executia lui while() sau for() ?
continue prompt() break
for(var i = 0; i< 8; i++) {
  if(i > 1) break;
  alert(i);
}
Indicati functia utilizata pentru a crea constante.
define() include() defined()
define("CONSTANT_NAME", "value");
echo CONSTANT_NAME;
Care este forma de plural a substativului "class" (clasa)?
classes clases clasis
This school has three classes.
- Scoala asta are trei clase.
Care este pluralul substativului "voz" (voce)?
vose voze voces
Escuché dos voces.
- Am auzit doua voci.
createElement si insertBefore

Last accessed pages

  1. Obiectul form in JavaScript (865)
  2. Verbe modale - Modal verbs - CAN, COULD, MAY, MIGHT, MUST (60543)
  3. Coduri pt culori (56935)
  4. Obiectul anchor si Lucru cu adrese din link (529)
  5. Obiectul location (684)

Popular pages this month

  1. Conditional IF in Limba Engleza - Fraze Conditionale (1755)
  2. Exercitii engleza - English Tests and exercises - Grammar (1667)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1491)
  4. Curs HTML gratuit Tutoriale HTML5 (1191)
  5. Coduri pt culori (1179)