#create element

[tyln-blog]

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:

First step: 

// 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.

Thanks for reading

Taylan