While my dad and brother were busy visiting China, and my mom was god knows where, I was home working on some dhtml for a web page I am currently working on.I had not been able to play much with javascript before, but this summer I learned some interesting stupid things I didn't know:
To declare a button in HTML, we normally write:
"< input name="myButton" value="Press Me!" id="myButton" type="button">"
but what would happen, if we wished to dynamically create buttons, in some part of our document, when some random action occurred?
If we are using JavaScript, we can use the createElement( ) method. When using this kind of method, we have to state what kind of element we wish to create, therefore we can write:
document.createElement( KindOfElementToCreate)
Now, because I wished to make a button, I thought, I would need to do the following:
document.createElement( "button")
This kinda makes sense ,right?
The element I wanted to create was a button, so I send to the createElement method, the specification that the kind of object that I wanted, was "duh" a... button!
But Oh! ...I had to learn the wrong way, that this is INCORRECT!
If we look at the html closely, we see that a button is really an input object, and we make this input object of the button type. The type, is a kind of attribute that the input object has.
Therefore we would really need to write the following:
var myButton = document.createElement('input'); /* Here we are creating the input object*/
/*here we are specifying what the values, of the attributes of our input object are:*/
myButton.type = 'button';
myButton.value = '-';
myButton.disabled = 'disabled';
So we have now created a button, but we still need to add this button to our html form.
I wrote a special SPAN with ID="inserthrhere" at the point where I want the button to appear. We can use the appendChild() method on the SPAN and the button is made a child of the SPAN and it will magically appear were we wish.
document.getElementById('inserthrhere').appendChild(myButton);
Removing it is slightly more complex. First I create a temporary variable node to store the SPAN, then I tell it to remove its first child (myButton).
var node = document.getElementById('inserthrhere')
node.removeChild(node.childNodes[0]);
I actually had some trouble here, because in an internet tutorialI read, said that instead of writing
node.childNodes[0], inside the removeChild method, I could also write:
node.removeChild(document.getElementById('myButton'));
which does make sense, because childNodes is an array that contains all children of a node X . These children, are of course objects, so when using the removeChild method, we are stating what child, from the parent node, we wish to remove. So I supposed that with the document.getElementById('myButton') method, I would obtain the same result. But I got a weird bogus error there. I really don't understand why that happened...
I will keep reading, and try to figure out what the heck is going on there...
It is important to say that for understanding all this parents node, children nodes stuff, it is important perhaps to have a nice overview of:
DOM, which is a Document Object Model,a model of how the various objects of a document are related to each other. In the Level 1 DOM, each object, whatever it may be exactly, is a Node. So if you do
<"P">This is a paragraph<"/p">
you have created two nodes: an element P and a text node with content 'This is a paragraph'. The text node is inside the element, so it is considered a child node of the element. Conversely, the element is considered the parent node of the text node.
<"P">This is a <"B">paragraph
If you do
the element node P has two children, one of which has a child of its own:
<"P">
|
--------------
| |
This is a <"B">
|
|
paragraph
More about this matter can be read here: http://www.quirksmode.org/dom/intro.html
Cheers!
Happy coding!
