/    Sign up×
Community /Pin to ProfileBookmark

Append div tag

Copy linkTweet thisAlerts:
Nov 03.2008

Hi,
Sorry if a similar topic has already been discussed on this forum; lets say i am being lazy to search the forum ?.

Items Involved:
1. HTML Page
2. External CSS file

In an html page, i need to do dynamically append a div tag with an id (css) inside another div tag (which is hard coded in html) using javascript.

the external css looks like this:

#course_row{
height:66px;
background-color:#F9F9F9;
margin-top:1px;
}

[code=html]<!– this is the hard coded div –>
<div id=”course_list”>
<!– i want to append the div dynamically here –>
<script language=”javascript” type=”text/javascript”>
var divElement = document.getElementById(“course_row”);
document.appentChild(“course_row”);
</script>
</div>[/code]

I am sure my code is way off. I want to be able to add N Number of rows using the for loop.

I am new to HTML and Javascript, but i have a very good understanding of OOP and Action Script.

Any help would be appreciated.

Thanks

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@ZeroKilledNov 03.2008 — first, create the element and assign the ID. then you get a reference to the element where you want to append it. what follow is a sample:
<i>
</i>var div = document.createElement('div');
div.id = 'course_row';
document.getElementById('course_list').appendChild(div);
Copy linkTweet thisAlerts:
@MrNobodyNov 03.2008 — You won't be able to ID all of the added DIVs with the same ID. IDs must be unique. For your CSS, I would use a class name, instead (use a period instead of the pound sign). Otherwise, the following doesn't use the [B]appendChild()[/B] method, but it accomplishes the same thing. You can change it back to using the [B]appendChild()[/B] method, though. ?
[CODE]var obj = document.getElementById('course_list');
obj.innerHTML = '';
var courses = new Array(10);
var x, len = courses.length;
for (x=0; x<len; ++x)
{
obj.innerHTML += '<div class="course_row">text</div>n';
}[/CODE]
Copy linkTweet thisAlerts:
@felgallNov 03.2008 — Using the appendChild method makes it easier to convert to work with XHTML if you ever need to do that.

Also you don't need a class on all the divs you are adding as you can always reference them all using


#course_list div {

height:66px;

background-color:#F9F9F9;

margin-top:1px;

}
Copy linkTweet thisAlerts:
@uzairrahimauthorNov 03.2008 — This works awesome.

Thank you all for your help.

I'll prolly bug you guys soon again ?

You won't be able to ID all of the added DIVs with the same ID. IDs must be unique. For your CSS, I would use a class name, instead (use a period instead of the pound sign). Otherwise, the following doesn't use the [B]appendChild()[/B] method, but it accomplishes the same thing. You can change it back to using the [B]appendChild()[/B] method, though. ?
[CODE]var obj = document.getElementById('course_list');
obj.innerHTML = '';
var courses = new Array(10);
var x, len = courses.length;
for (x=0; x<len; ++x)
{
obj.innerHTML += '<div class="course_row">text</div>n';
}[/CODE][/QUOTE]
×

Success!

Help @uzairrahim 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.18,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

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