Create and remove html elements with javascript
In this post we'll check creating a html element with javascript. You know in web 2.0 with social media applications javascript tricks became popular. With these kind of tricks our application will become more efficient on visual properties.
First lets check what will we do?
In my older posts i told about my latest facebook application "Not Ortalaması Hesapla" You can check it by this link : http://apps.facebook.com/ortalamahesapla/
In this application i used basic javascript fade in, fade out tricks, create and remove html element functions.
When you click on plus button (+) in application you see a new lesson will be created and when you clicked on remove lesson (x) button it removes lesson. Lets take a look on codes:
// i accept that you coded a "addLesson" function and implemented with a button which create html element when clicked.
var wrapperDiv=document.getElementById('lessons') // lessons div is a wrapper div that contains all lessons in it. New element will take part in this div
var newDiv=document.createElement('div'); // our new div is created
var divIdName='lesson'+lessonid; // we need to give an id and name to new div.
Second Step is setting attributes and events for new div:
newDiv.setAttribute('id',divIdName); // we set id
newDiv.setAttribute('class','lesson'); // we set class
newDiv.setAttribute('name',divIdName); // we set name
wrapperDiv.appendChild(newDiv); // finally append new div to wrapper
Now we have a new empty div named lesson + id. As you can see in application we need 2 input boxes, a combobox and a remove button. Now we need to create these html elements in lesson div that we created in first step
Again we need a wrapper div but this time our new wrapper div is "lesson"+id div that we created in first step.
wrapperDiv=document.getElementById(divIdName); // get div that we created in first step and set as new wrapper.
// now we should create an inputbox element and set its attributes
var newInput=document.createElement("input"); // create an input element
var inputIdName='lessonName'+lessonid; // give a unique id to it
newInput.setAttribute('id',inputIdName); // set unique id
newInput.setAttribute('name',inputIdName); // set name
newInput.setAttribute('class','lessonName'); // set class
newInput.setAttribute('type','text'); // set type
newInput.setAttribute('value','Ders '+(lessonid+1)); // set a base value
var jsOnclickWord='Ders '+(lessonid+1); // a variable that we use in onClick event
newInput.setAttribute('onclick','if(this.value=="'+jsOnclickWord+'")this.value=""'); // we added an onClick function to inputbox. When we focus inputbox value will disappear.
newInput.setAttribute('onblur','nameInputOnBlur('+lessonid+');'); // we set an onBlur event and when we blur out inputbox it will call "nameInputOnBlur function. This function may has some operations and calculations according to your application.
wrapperDiv.appendChild(newInput); // finally add new inputbox to wrapper.
Now we need to create another inputbox element with following steps above:
var newInput2=document.createElement("input");
var inputIdName2='lessonCredit'+lessonid;
newInput2.setAttribute('id',inputIdName2);
newInput2.setAttribute('name',inputIdName2);
newInput2.setAttribute('class','lessonCredit');
newInput2.setAttribute('type','text');
newInput2.setAttribute('value','Kredi');
newInput2.setAttribute('onclick','if(this.value=="Kredi")this.value=""');
newInput2.setAttribute('onblur','creditInputOnBlur('+lessonid+');');
wrapperDiv.appendChild(newInput2);
// these operations excatly same with first inputbox operations.
We should create a combobox element. It's bit different from creating inputbox element but it's same as logical.
var select=document.createElement('select'); // created a new select element
var selectIdName='lessonLetter'+lessonid; // give an unique id
select.setAttribute('id',selectIdName); // set attributes
select.setAttribute('name',selectIdName);
select.setAttribute('class','lessonLetter');
select.setAttribute('onclick','lessonLetterOnClickFunc('+lessonid+');'); // set a function for onClick event.
// Different part is we need to create extra "option" element for combobox and append them too.
var newOpt1=document.createElement('option'); // a new option element
newOpt1.value=4; // set value
newOpt1.text='AA'; // set text
select.appendChild(newOpt1); // append it to select
// you can add more options. Maybe with a for loop or sql query. It's up to you.
// Finally you need to append select element to wrapper
wrapperDiv.appendChild(newInput3);
You see it's easy to create html elements with javascript. Now lets take a look on removing html elements. It's easy as creating elements.
Again i accept you coded a "removeLesson" function and implemented with remove button (x)
var w=document.getElementById('lessons'); // get main wrapper
var divid='lesson'+x // calculate id of element which we'll remove. x is a parameter passed with javascript function and declares id of lesson'll be removed
var r=document.getElementById(divid); // get element we'll remove
w.removeChild(r); // remove it
You see it's easy to remove elements with javascript. I hope it's a useful tutorial about creating and removing html elements with javascript.
