Create Div inside a Div

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
iknownothing
Forum Contributor
Posts: 337
Joined: Sun Dec 17, 2006 11:53 pm
Location: Sunshine Coast, Australia

Create Div inside a Div

Post by iknownothing »

hey guys,
i have a function that creates div's according to a number indicated in a textbox. What I want is to have the created div, go inside another div (which is a popup, not visible from load (its a calculator by the way)).

So Far I have this:

Code: Select all

newDiv = document.createElement("div");
newDiv.innerHTML = "<input type='text'>";
my_div = document.getElementById("main");
document.body.insertBefore(newDiv, my_div);
but as you can see, it only created the div before the "main" div, I did a search, and all I could come up with is InsertBefore or InsertAfter, no InsertInside or anything like that. So does anyone know how it could be done?



Also, how could I call the div a different name according to the current status of the loop, I realise it could be done quite easily if it was a straight number, but I would like it a bit more obvious than that, eg. Div1.

eg.

Code: Select all

Loop 1:
newDiv1

Loop2:
newDiv2
Thanks.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

I would use (can anyone guess??) ........... jQuery!

Code: Select all

$('<div/>').append($('<input type="text"/>')).appendTo("#main");
as for the naming:

Code: Select all

for(i=0;i<5;i++){
	$('<div/>').append($('<input type="text"/>')).appendTo("#main").attr('id','Div'+i);
}
http://www.visualjquery.com/1.1.1.html <-- look under DOM > Manipulation
User avatar
iknownothing
Forum Contributor
Posts: 337
Joined: Sun Dec 17, 2006 11:53 pm
Location: Sunshine Coast, Australia

Post by iknownothing »

its telling me $ is not defined..? does jquery go inside javascript tags?
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

you need to download and include the jQuery library: http://jquery.com

jQuery is a kick-ass javascript library - once you've included it in the page you can use any of the core features.
User avatar
iknownothing
Forum Contributor
Posts: 337
Joined: Sun Dec 17, 2006 11:53 pm
Location: Sunshine Coast, Australia

Post by iknownothing »

yeah, figured that out now, works like a charm. Cheers.
Post Reply