declare

Advanced JavaScript - Module 01 - Part 02 - Add array elements dynamically



Sharing buttons:

okay in this video I'm going to

demonstrate on how to add elements to an

existing array in a dynamic fashion so

which means I will be adding a textbox

to my webpage and based on the values I

provided inside the textbox I would like

to have those elements to be added one

by one to the list whenever I click on

the button add so for each and every

value I provide inside the textbox I

click the button add and once I click on

that ad it has to add that particular

number whatever I provided in the text

box or might be also string so those

values needed to be added to the array

and finally list that particular array

of values inside it day one so let me

create a new file so I'm going to call

this one a zero two for now so I will be

starting with script tag so the first

thing is that I would like to have an

array and I'm going to call that one as

a list for now so you can also put error

here of instead of Lists so this is just

available you can put whatever you would

like to have so list is the array and

now I would like to have a function

called add items of existing list so

this is the function which I would like

to execute whenever I click on a pattern

so let me design the UI first so I would

like to have a table first and inside

the table I would like to have a TR that

is a table row and I would like to have

a definition table definition and the

first one will have and

any value so that is going to be

valuable in the first column and the

second column I would like to have a

textbox with input ID equal to 3 x2

value and so the type of this particular

input tag is going to be a textbox so I

define the textbox and the name of the

textbox is going to be t XD value for

now and then I'm going to have another

table row and this is just a blank

column so that you know I will not have

anything here and out of underneath the

first column so in the second column I

would like to mention a buttom and I

would like to identify that button as BT

and AD and type equal to button and

value which is going to be the caption

so I would like to have something like

add to list and on clicking this button

I would like to execute add item to

existing list function so this is

essentially nothing but whatever the one

we added here so I'm clicking on this

button I would like to have this

function to be executed which is nothing

but this function okay so I have the

table which is going to list move the

text box and the button which is fine so

whenever I would like to display the

results I would like to have first of

all items count to be displayed so I

would like to have items called as a do

tag so which means I would like to have

some kind of value to be displayed here

dynamically whenever I click on add so

which means it needs to count the number

of elements available in the array and

finally place it inside the do

and on top of that I would like to have

another do and I would like to call this

one as items list so this is the deal

which is supposed to list our each and

every element available in the list so

the more elements I add the more

elements we are going to see inside this

particular do so let us concentrate on

add item to existing list so in here I

would like to say we are number of items

equal to list dot length so this is the

one okay so list dot al is small case

here as because you can say list dot

length so length is the property which

gives us the number of elements

available in that particular list so in

that way I'm having the number of items

and whenever I would like to add you

know I can just get the same number of

items which is nothing but the last

position so the position starts from 0

so a number of items if there are 4 if

the position starts from 0 the last

position is 3 so in order to add a new

element I have to have 3 plus 1 which is

nothing but the new location so the new

position is always going to be list dot

length as because if I have 4 elements

the last position is 3 and now I am

adding to the position for which is

nothing but the new element so inside

this one I would like to have something

like document dot get element by ID and

txt value so this is the one I would

like to fetch from so this is nothing

but this one so I am getting hold of

this one which is nothing but the test

bars getting the value out of it and

then placing inside the list and after

that I would like to have

the array to be displayed house I would

like to call this nice display results

so this is the function I would like to

have and I'm going to write the display

results function in this case so in this

function first of all I would like to

get the number of elements available

using list dot length so which gives me

the number of elements so I have a tag

called items count I would like to place

the number of elements in this div so

for that purpose I need to get hold of

that element so I'm going to say

document dot doc you're maint dot get

element by ID and then I'm going to use

the same day whatever I have in here

place it here so that way I get hold of

items can't do and in order to write

inside the day I can use the property

inner HTML and then I can say a number

of items added click at the end or two

string so now that we have the number of

items already displayed inside the items

count do we need to have all the items

to be displayed in the items list so in

order to do that first of all I need to

get hold of this guy so I just copy this

for now and I'm going to say something

like variable items do equal to document

dot get element by ID and then I can say

items list so that way I get hold of

that deal next I need to remove each and

every element available in that list why

because the more elements I add for each

and every element I click on this one I

need to have the refreshing of display

elements so whenever I am going to

refresh the display elements I need to

get rid of all those elements which are

already available here so all the nodes

are going to be removed from here

and I am going to add a fresh list of

all the new items so in that way I'm

going to create new items every time

whenever I click on add of course there

are more efficient ways to do this but

for now I just wanted to demonstrate but

on how to remove all the existing nodes

and then recreate all the nodes

dynamically so for that purpose I'm

going to have a while loop and I can say

items list do dot if it has got any

child nodes I am going to remove them so

the easiest way to remove there is

remove child and I can say items list

div dot last child so you can use first

child or last and it doesn't matter here

but as long as it removes at least one

of those children we are good enough so

it removes each and every child here and

again goes back and if it finds more

child nodes it's going to remove further

saying that way

at the moment I complete this while loop

we are going to have all of the child

nodes which are in between these two

tags are going to be removed completely

and once everything is done now I would

like to add all the elements from the

beginning it is starting from zero the

position in the array so I equal to zero

I understand and I plus plus so which

means I would like to start from zero to

position in the array and less then n

which is nothing but number of elements

so first of all I need to create a new

deal to be added inside this do so for

that purpose I'm creating a new do and I

am going to call document dot create

element

a new element to do and under that I

would like to have New Deal related

information to be placed so as I

mentioned innerhtml is the property

where we can place any information so in

this case I would like to have first of

all what item we are going to display so

in this case I would like to display I

plus one so that we will be knowing the

logical representation of the current

position so I could also say I which

essentially goes to 0 so in this case I

plus 1 just because you know it makes

more sense for our readability okay so

on top of that I would like to say of

inductive string so which means I am

saying item 1 of 4 item 2 of 4 so this

is the land and I plus 1 makes more

sense as because I'm working with n here

which is nothing but number of elements

so on top of that I would like to have

the element itself will be displayed by

saying list of I so this is where I'm

really getting the element inside the

array so once I get it

and all of this information will be

placed together as a simple caption or

simple information inside this interval

now HTML of that video so once I have

the new do completed I need to add that

new view to my items list so the

reference of this items list is

available here and I am going to use the

same reference items listed ooh good

appendchild

so app and child is the method which I

can use in order to have a new child

node to be added to that particular do

so

so you do let us ensure that you have

the correct one okay and there we are

so let us execute this and test it so I

go in here click on this and I have

entered any value here so let me add

something like jag and click Add and now

you can see item 1 of 1

I don't have the element to be displayed

here I might be missing something let us

quickly check so I have a semicolon

which is a bug I need to remove that so

let me refresh it again so let me say

jag and click Add and now you can see I

have item 1 of 1 items are available as

Jag so I can say chat and I can say

added now item 1 of 2 so out of 2 items

the first one item is jag the second

item is chat and they can add any kind

of string to that and all of those are

going to be displayed dynamically so I

am adding to the list and at the same

time that count and everything is going

to be updated accordingly and how all

the items to be displayed dynamically