/    Sign up×
Community /Pin to ProfileBookmark

create/remove DIV using JS

Copy linkTweet thisAlerts:
Apr 05.2008

I have such script to create “div” using JavaScript:

[CODE]
function createDiv()
{
var newdiv = document.createElement(‘div’);
var divIdName = ‘div1’;
newdiv.setAttribute(‘id’,divIdName);
newdiv.style.width = “100px”;
newdiv.style.height = “100px”;
newdiv.style.left = “100px”;
newdiv.style.top = “100px”;
newdiv.style.position = “absolute”;
newdiv.style.background = “#FF0000”;
newdiv.style.border = “1px solid #000000”;
newdiv.innerHTML = ‘this is 1st DIV’;
document.body.appendChild(newdiv);
}
[/CODE]

but I need to have few such DIVs on the page. They need to have the same width, height, background, border etc. so most of values will be common. The only thing which should be different would be text inside DIV and position of this DIV.

How can I rebuild this function to don’t need repeat whole script to create another DIVs and how could create exact DIV after onclick? I mean something like:

[CODE]
<a onclick=”createDiv(‘div1’)”>create 1st DIV</a>
<a onclick=”createDiv(‘div2’)”>create 2nd DIV</a>
<a onclick=”createDiv(‘div3’)”>create 3rd DIV</a>
[/CODE]

Also I’m not sure how add option to remove created DIV. I’ll be grateful for help.

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@scragarApr 05.2008 — function createDiv(){
var newdiv = document.createElement('div');
var divIdName = 'div'+arguments[0];
newdiv.setAttribute('id',divIdName);
newdiv.style.width = "100px";
newdiv.style.height = "100px";
newdiv.style.left = "100px";
newdiv.style.top = arguments[0]+"00px";
newdiv.style.position = "absolute";
newdiv.style.background = "#FF0000";
newdiv.style.border = "1px solid #000000";
newdiv.innerHTML = 'this is div number '+arguments[0];

var lnk = document.createElement('a');
if(lnk.addEventListener){
lnk.addEventListener('click', (function(i){
return function(){
document.body.removeChild(i)}
})(newdiv), false);
}else
if(lnk.attachEvent){
lnk.attachEvent('onclick', (function(i){
return function(){
document.body.removeChild(i)}
})(newdiv));
}else{
lnk.onclick = (function(i){
return function(){
document.body.removeChild(i)}
})(newdiv);
};
lnk.href = '#';
lnk.appendChild(document.createTextNode("remove"));
newdiv.appendChild(lnk);

document.body.appendChild(newdiv);
};[code=html]
<a onclick="createDiv(1)">create 1st DIV</a>
<a onclick="createDiv(2)">create 2nd DIV</a>
<a onclick="createDiv(3)">create 3rd DIV</a>
[/code]Fixed.
Copy linkTweet thisAlerts:
@FangApr 05.2008 — Give newdiv a predefined class.
Copy linkTweet thisAlerts:
@AnnaccondauthorApr 05.2008 — I understand, I'll try to find some solution by myself. However I have a question about this part:

newdiv.innerHTML = 'this is div number '+arguments[0];[/QUOTE]

I need to text inside those DIVs be a full phrase (completly different) - not a DIV number. Can I handle it in array or something?
Copy linkTweet thisAlerts:
@scragarApr 05.2008 — code fixed now,just a matter of passing the newdiv into a function to remove it, instead of hoping that the href attribute works as expected.

I need to text inside those DIVs be a full phrase (completly different) - not a DIV number. Can I handle it in array or something?[/quote]
you could use an array, or a second argument(my recomendation)
Copy linkTweet thisAlerts:
@FangApr 05.2008 — No problem passing an array to innerHTML
Copy linkTweet thisAlerts:
@AnnaccondauthorApr 05.2008 — I added array:


var divText = new Array();

divText[0]="some phrase";

divText[1]="another phrase";

divText[2]="last phrase";
[/QUOTE]

but have some error after put it in script:

newdiv.innerHTML = divText[arguments[0]];[/QUOTE]

I quess I defined it wrong because included 1st DIV it show array 1, in 2nd DIV array 2 and in 3rd DIV "undefined".
Copy linkTweet thisAlerts:
@scragarApr 05.2008 — newdiv.innerHTML = divText[arguments[0]-1];
Copy linkTweet thisAlerts:
@AnnaccondauthorApr 05.2008 — Thank you.
×

Success!

Help @Annaccond spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...