Studiu Javascript – Crearea de conţinut
Folosind DOM si Javascript este posibil pentru a adăuga conţinut dinamic în pagina dvs. atunci când un utilizator efectueaza o acţiune fără a se întoarce la server. Utilizarea createElement şi createTextNode putem adăuga la pagina HTML.
În acest exemplu, vom adauga un paragraf cu un text, atunci când un utilizator face clic pe un link. Noi vom folosi pentru a crea createElement p tag. Apoi createTextNode pentru a adăuga text în punctul tag.
Mai întâi de toate, să cream unele markup pe care le putem folosi o putem folosi pentru a tine javascript oprit.
<h1>Leaning Javascript – Creating content</h1>
<p><a href=”non_js_content.html” id=”trigger”>Clicking this link will dynamically create content</a></p>
<div id=”updateDiv”>
<h2>Update panel</h2>
<p>A new paragraph will be added in here when the user clicks the link above</p>
</div>
Sunt doua parti aici pentru javascript pentru a te agata de ele.Prima este “declanşa”. Acesta este link-ul de pe care utilizatorii vor da clic pentru a adăuga conţinut la pagină. Cea de-a doua este “updateDiv. Aceasta este în cazul în care conţinutul generat va fi adăugat.Observati dacă Javascript este dezactivat atunci există un link pentru a trimite utilizatorul la o altă pagină.
function createContent() {
// Start by declaring our variables
var updateDiv; // The div we are putting the new content in
var trigger; // This is the link that fires the function
var newParagraph; // The new paragraph tag
var newText; // The new text
// Check the browser supports getElementById. If not return.
if(!document.getElementById) { return; }
// Find div that holds the content
updateDiv = document.getElementById(“updateDiv”);
// If it isn’t there return
if (!updateDiv) { return;}
// Find the div with the id example
trigger = document.getElementById(“trigger”);
// If it isn’t there return
if (!trigger) { return;}
//It is there so do some stuff
trigger.onclick = function(){
// Create a new paragraph element
newParagraph = document.createElement(‘p’);
// Create some text
newText = document.createTextNode(‘This paragraph was dynamically inserted using the DOM’);
// Put the text in the new paragraph element
newParagraph.appendChild(newText);
// Append the new paragraph to the update Div
document.getElementById(‘updateDiv’).appendChild(newParagraph);
// Disable the link by returning false
return false;
}
}
Sperăm că comentariile vă ghida în acest sens. Practic ne uitam dupa updateDiv si parti de declansare si asteptam utilizatorul sa dea clic pe link. Când se face clic pe link-ul de conţinut este creat şi introdus. Vom folosi pentru a pune appendChild nou creat alineat şi text în updateDiv container.
Comentarii recente