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 tag se foloseste pentru a crea o caseta de adaugare text?
<form> <input> <div>
<input type="text" name="a_name" value="val" />
Ce proprietate CSS se foloseste pentru a afisa textul cu majuscule-mici?
display font-variant font-style
h3 {
  font-variant: small-caps;
}
Ce instructiune afiseaza o fereastra cu un mesaj in ea?
for() Date() alert()
var msg = "Viziteaza CoursesWeb.net";
alert(msg);
Indicati codul PHP prin care se obtine IP-ul utilizatorului.
$_SERVER["HTTP_USER_AGENT"] $_SERVER["REMOTE_ADDR"] $_GET[]
$ip = $_SERVER["REMOTE_ADDR"];
echo $ip;
Cum se traduce cuvantul "actually"?
actual de fapt acum
He actually came on time.
- De fapt, el a venit la timp.
Cum se traduce expresia: "Hace buen tiempo"?
Face timp E vreme frumoasa Drum bun
Hoy hace buen tiempo.
- Astazi e vreme frumoasa.
createElement si insertBefore

Last accessed pages

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (271171)
  2. Comenzi neregulate (796)
  3. Pronumele relativ 3 (937)
  4. Adverbe (1686)
  5. Espanol Chistes - Glume, Bancuri (5054)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (885)
  2. Exercitii engleza - English Tests and exercises - Grammar (390)
  3. Cursuri limba engleza gratuite si lectii online (373)
  4. Coduri pt culori (365)
  5. Gramatica limbii engleze - Prezentare Generala (358)