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
Care tag HTML5 defineste un text marcat, evidentiat?
<mark> <embed> <span>
<p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>
Ce pseudo-clasa CSS defineste un stil la element cand mouse-ul e deasupra lui?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Clic pe functia ce returneaza un sir cu un numar rotunjit la x decimale.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicati functia PHP care adauga continutul unui fisier intr-un array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Clic pe raspunsul potrivit la intrebarea: "What time is it?"
On the 7th of July 1996 It is a quarter to 5. Nice weather.
What time is it? It is a quarter to 5.
- Cat este ora? E 5 fara un sfert.
Indicati raspunsul potrivit la intrebarea: "¿Qué hora es?"
Hace buen tiempo. En el 7 de julio de 1996 Son las tres menos cuarto.
¿Qué hora es? Son las tres menos cuarto.
- Cat este ora? E 3 fara un sfert.
createElement si insertBefore

Last accessed pages

  1. Parcurgere Array secvential si asociativ (1588)
  2. PHP OOP - Clase, Obiecte, constructor (5102)
  3. Scripturi JavaScript (3639)
  4. Download carti electronice si programe pentru Limba Engleza (43198)
  5. Titluri, Paragrafe, Un nou rand, Linie orizontala (32360)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (767)
  2. Exercitii engleza - English Tests and exercises - Grammar (596)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (587)
  4. Gramatica limbii engleze - Prezentare Generala (580)
  5. Prezentul simplu - Exercitii si teste incepatori (504)