Day 2 of my “active” learning has begun and as item 2 of my TO DO list says I have to write at least one blog post a day – here it is!
As you can see on the image at the moment of writing it was possible to enter details only of a single person. So let’s try and let our traveller have a company 😉
The idea is to repeat “Personal Details” section N times. N is a number of people in a group. There are two ways I can think of to make this work – either to clone a
fieldset node or to create a each node manually using
document.createNode method. The second solution I won’t even try as there are about half of a hundred different HTML elements to create. For this example I chose
cloneNode method. Cloning an element has its drawbacks too. Let’s look at examples.
The following code clones a “div1”
DIV node with a few child nodes and inserts it in “holder”
Note a parameter I pass into
cloneNode. If parameter is set to
true then an element will be cloned with all the child nodes it has. Otherwise, if parameter is
false, only the node itself is duplicated without its children.
The code above works perfectly well except for one thing –
cloneNode doesn’t clone event handlers applied to an element. To make your event handlers work you have to redefine them each time for each cloned node. You will also notice that every child of cloned node and the node itself have the same IDs as the original. To make your
HTML code valid you should go through all cloned elements and give them unique IDs. This can be done with
setAttribute method. For example,
Actually IE does clone events that were set like
elem.onclick=... or using
attachEvent method. But Firefox and Opera don’t.
There are a few well-known bugs with cloned event handlers in IE. To be on the safe side you’d better make sure you remove all handlers off the element or clone elements before applying any handlers to them.