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.
Metoda createElement('tag') creaza in JS un obiect cu elementul HTML specificat la 'tag'.
Sintaxa generala este urmatoarea:
createElement() reprezinta un element HTML gol in JavaScript. La acesta se poate adauga continut cu innerHTML si atribute cu setAttribute().
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 HTMLSimilar 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 metodainsertBefore(), prezentata in contnuare.
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:
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.
<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>
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()'
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>
<form action="script.php" method="post"> ... </form>
#id {
background-color: #bbfeda;
box-shadow: 11px 11px 5px #7878da;
}var fruits = ["mar", "cireasa", "banana"]; fruits.shift(); alert(fruits.length); // 2
if(extension_loaded("PDO") === true) echo "PDO este valabil."Can I listen to music? - Pot asculta muzica?
Me gustan las frutas dulces. - Imi plac fructele dulci.