createelement and append 1

[ThomasJSmart]

im playing around trying to learn more advanced javascript.. there are 2 things i realy want to learn/do

1. creat and attach a div. this works in FF but its not working in IE6

<div id="holderTest" style="border:solid 1px #009966; width:200px; height:100px;"></div>

<script type="text/javascript">
	var holderDiv = document.createElement("div");
	holderDiv.setAttribute("class","Sdiv");
	holderDiv.setAttribute("style","display:block");
	var appendTo = document.getElementById('holderTest');
	appendTo.appendChild(holderDiv);
</script>

im wondering why not?
i would like to learn to do the following with this:

a function that receives an objectID for an existing object (a textfield), i would like to creat a holder div around the textfield, then add another new div after the text field so it looks like this: <div id="holder"><input type="text"><div id="foo"></div></div>


the 2nd thing i would like to solve has to do with functions and global variables, would this be solved with a class?

i have a set of functions that generally make a list of dynamic objects from an array, these functions use a couple of global variables, all works great as long as i have only 1 part of the page using these functions, if i need 2 parts of the page using them it all goes to hell because of the global vars now being double used...



I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!

 

[tsuji]

>holderDiv.setAttribute("class","Sdiv");
[tt]holderDiv[red].className="Sdiv"[/red];[/tt]

>holderDiv.setAttribute("style","display:block");
[tt]holderDiv[red].style.display="block"[/red];[/tt]

 

[ThomasJSmart]

ah, that simple.. thank you.
i can attach it to a div and see it now.


now how can i attach the div to a textfield, or that it looks like its attached to it anyway?

so how do i turn this:

<table border="0">
<tr><td><strong>Textfield:</strong></td>
<td><input type="text" value="" name="textfield" id="textfield"></td>
</tr>
</table>

into this using javascript?

<table border="0">
<tr><td><strong>Textfield:</strong></td>
<td><div style="position:relative">
	<input type="text" value="" name="textfield" id="textfield">
	<div class="Sdiv" style="display:none" id="textfieldSDiv"></div>
	</div></td>
</tr>
</table>

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!

 

[tsuji]

That is not to be described as "attach" to a textfield. That is ultra misleading. What you do is to append it as a Child to the containing div. To faciliate the mechanism, suppose the containing div has an id "x".
[tt]
<td><div [blue]id="x"[/blue] style="position:relative">
<input type="text" value="" name="textfield" id="textfield"></div>
</div></td>
[/tt]
Then all you do in the script is to use appendChild.
[tt]
var odiv=document.createElement("div");
odiv.id="textFieldSDiv";
odiv.style.display="none";
odiv.className="Sdiv";
document.getElementById("x").appendChild(odiv);
[/tt]
But how do you set up the div with id="x" is more complicated. You have to removeChild of the input element in the container td. Create the div of id="x", append the removed input element to it and then append the div with id="textFieldSDiv". I leave it to you to fill in the detail.

 

[ThomasJSmart]

ok, im gonna try this in a bit, about the adding div id x: i could use the clone function to make a copy of the tfield so its easier to add later, thanks for this will let you know how it goes

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!