Cum sa adaugam si apoi sa stergem elemente create dinamic
In acest tutorial va voi arata cum sa adaugati si cum sa stergeti un paragraf pe care l-ati adaugat in pagina in mod dinamic.
Pentru acest lucru, vom crea un document ".html" si il vom denumi "AddRemElements".
Apoi vom adauga un element TextArea si doua hiperlink-uri.
In codul sursa, vom adauga urmatorul cod Javascript in tag-ul "head" al paginii:
<script type="text/javascript" language="javascript">
// cream o functie globala care va returna id-ul unui element (la alegerea
noastra) din pagina curenta
function $(id) { return document.getElementById(id); }
// aceasta functie va adauga un element "p" in interiorul paginii
function addElement()
{
// cream elementul "p" (paragraf)
var theElement = document.createElement("p");
// cream continutul acstui paragraf transmitandu-i ca valoare
// textul din elementul "TextArea"
var theInnerText = document.createTextNode($("TextArea1").value);
// adaugam textul in paragraf
theElement.appendChild(theInnerText);
// verificam documentul pentru a gasi tag-ul body
var theBody = document.getElementsByTagName("body").item(0);
// verificam daca exista text in elementul "TextArea"
if ( $("TextArea1").value != "" )
{
// daca exista, atunci adaugam acel text in pagina sub forma unui paragraf
theBody.appendChild(theElement);
}
else
{
// daca nu exista, atunci afisam un mesaj prin care specificam acest lucru
alert( "Nimic de adaugat!");
}
}
// aceasta functie va sterge toate elementele "p" create de functia anterioara
// in ordinea inversa crearii lor
function removeElement()
{
// declaram o variabila care va cauta in document toate tag-urile "p"
var allElements = document.getElementsByTagName("p");
// verificam daca exista cel putin un element "p" in pagina
if (allElements.length != 0)
{
// daca exista, atunci le stergem pe toate pe rand incepand cu
// ultimul element creat si terminand cu primul
var lastElementCreated = allElements.item(allElements.length - 1);
// verificam documentul pentru a gasi tag-ul body
theBody = document.getElementsByTagName("body").item(0);
// cream o variabila care va contine ultimul element sters din pagina
var removedElement = theBody.removeChild(lastElementCreated);
}
else
{
// daca nu exista, atunci afisam un mesaj prin care specificam acest lucru
alert("Nimic de sters !");
}
}
</script>
Dupa aceea, vom denumi hiperlink-urile astfel:
<a id="addElementLink" href="javascript:addElement();">Add
paragraph</a>
Aceasta legatura va adauga in pagina un nou paragraf.
Cea de-a doua legatura arata astfel:
<a id="removeElementLink" href="javascript:removeElement();">Undo!</a>
Aceasta legatura va sterge paragrafele pe care le-am creat apasand pe prima legatura.
Asta e tot !
Acum codul sursa al paginii noastre trebuie sa arate astfel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Adding and removing elements in a web page dinamically</title>
<script type="text/javascript" language="javascript">
// cream o functie globala care va returna id-ul unui element (la alegerea
noastra) din pagina curenta
function $(id) { return document.getElementById(id); }
// aceasta functie va adauga un element "p" in interiorul paginii
function addElement()
{
// cream elementul "p" (paragraf)
var theElement = document.createElement("p");
// cream continutul acstui paragraf transmitandu-i ca valoare
// textul din elementul "TextArea"
var theInnerText = document.createTextNode($("TextArea1").value);
// adaugam textul in paragraf
theElement.appendChild(theInnerText);
// verificam documentul pentru a gasi tag-ul body
var theBody = document.getElementsByTagName("body").item(0);
// verificam daca exista text in elementul "TextArea"
if ( $("TextArea1").value != "" )
{
// daca exista, atunci adaugam acel text in pagina sub forma unui paragraf
theBody.appendChild(theElement);
}
else
{
// daca nu exista, atunci afisam un mesaj prin care specificam acest lucru
alert( "Nimic de adaugat!");
}
}
// aceasta functie va sterge toate elementele "p" create de functia anterioara
// in ordinea inversa crearii lor
function removeElement()
{
// declaram o variabila care va cauta in document toate tag-urile "p"
var allElements = document.getElementsByTagName("p");
// verificam daca exista cel putin un element "p" in pagina
if (allElements.length != 0)
{
// daca exista, atunci le stergem pe toate pe rand incepand cu
// ultimul element creat si terminand cu primul
var lastElementCreated = allElements.item(allElements.length - 1);
// verificam documentul pentru a gasi tag-ul body
theBody = document.getElementsByTagName("body").item(0);
// cream o variabila care va contine ultimul element sters din pagina
var removedElement = theBody.removeChild(lastElementCreated);
}
else
{
// daca nu exista, atunci afisam un mesaj prin care specificam acest lucru
alert("Nimic de sters !");
}
}
</script>
</head>
<body>
<form id="form1" action="#">
<textarea id="TextArea1" rows="5" cols="1" style="width: 261px; height:
119px"></textarea>
<a id="addElementLink" href="javascript:addElement();">Add paragraph</a>
||
<a id="removeElementLink" href="javascript:removeElement();">Undo!</a>
</form>
</body>
</html>
No comments:
Post a Comment