Actually, technically, what I suggested wastes the original node since
it never gets inserted, just cloned. Maybe this would be slightly
better:
function MakeEmailField(n) {
var $inputBox = $('<input>').attr("type", "text");
for(var i = 1; i < n; i++) {
$inputBox.clone().attr("id","email"+i).appendTo('#myForm');
}
$inputBox.attr("id","email"+n).appendTo('#myForm');
}
Noticed the loop starting value is different. This way, the cloning
only happens if you want more than one, which is a little more
efficient.
--Erik
On 8/17/07, Erik Beeson <[EMAIL PROTECTED]> wrote:
> You don't really want multiple fields with the same ID though, do you?
> I think .clone() will help you:
>
> function MakeEmailField(n) {
> var inputBox = $('<input>').attr("type", "text");
> for (i =0; i < n; i++) {
> inputBox.clone().attr("id","email"+i).appendTo('#myForm');
> }
> }
>
> The initial $('<input>') bit creates a DOM node. Adding it the first
> time adds it to the DOM, but adding it subsequent times is actually
> "moving" it. If you did:
>
> inputBox.appendTo('#myForm1');
> inputBox.appendTo('#myForm2');
> inputBox.appendTo('#myForm1');
>
> I think you would find that the element would bounce back and forth
> (with adequate between those calls obviously).
>
> Sorting DOM nodes works the same way. You grab a reference to them,
> sort them outside of the DOM, and reinsert them all back in the same
> place they came from. They'll come out sorted because reinserting them
> (via append() or some such) is actually doing more of a "move":
>
> $('#parent').children().sort().appendTo('#parent');
>
> If you don't do the finally .appendTo(), you will have sorted them in
> memory, but not in the DOM.
>
> Anyways, a little off topic there. I hope that answers your question.
>
> --Erik
>
>
> On 8/17/07, Pops <[EMAIL PROTECTED]> wrote:
> >
> > On Aug 17, 2:49 am, "Karl Rudd" <[EMAIL PROTECTED]> wrote:
> > > In the examples I gave the new element is "saved" to the variable
> > > inputBox. So to add it to the DOM you will do something like what Erik
> > > wrote, that is:
> > >
> > > inputBox.appendTo('#myForm');
> > >
> > > The above appends it (that is, adds it as the last element) to an
> > > element with id="myForm".
> >
> > Got it! Seeing the syntax helps. Much appreciated!
> >
> > I ask because this idea hits home with a major consideration in my
> > current plans for one particular area for using jQuery, which begged
> > the question:
> >
> > Is the VARIABLE autonomous?
> >
> > Meaning, is this following valid?
> >
> > var inputBox = $('<input>').attr("type", "text").attr("id",
> > "someText");
> > .
> > .
> > inputBox.appendTo('#myForm');
> > inputBox.appendTo('#myForm');
> > inputBox.appendTo('#myForm');
> >
> > In my testing, that doen't work. It only adds the first one.
> >
> > The only way I can get that to work is to instantiate new variables.
> >
> > Of course, good JS coding can modularize a function generator.,
> > however it somewhat defeats the intended purpose - "Create Once - Use
> > Many Times!"
> >
> > A practical example where I was intended to use dynamic creation of
> > DOM elements was for our questionnaire (WCQ) web form generation.
> > The WCQ Editor allows for device independent creation of
> > questionnaires from a single source definition WCQ file. For example:
> >
> > ;----
> > ACTIONNUMBER 1
> > ACTION DISPLAY
> > PROMPT @[EMAIL PROTECTED] @USER.FIRSTNAME@
> > NEXT <Default>
> > ;----
> > ACTIONNUMBER 2
> > ACTION QUESTION
> > PROMPT Leave mail on the server when picking mail via POP3?
> > TYPE YesNo
> > DESTINATION POP3SNOOP
> > ;----
> > ACTIONNUMBER 3
> > ACTION QUESTION
> > PROMPT What are your contact email addresses (upto 5 allowed)?
> > TYPE Text
> > DESTINATION EMAILADDRESS(5)
> > MAX 70
> > NEXT <Default>
> > ;----
> > ACTIONNUMBER 4
> > ACTION END
> > NEXT <Default>
> >
> > For Console users, a text based interactive question/answer dialog is
> > created from the WCQ file. For Web users, the server creates JS and
> > forms. My goal was to pull the JS creation from the server and move
> > new generalized JS/jQuery code to the client. The feed would be a
> > JSON structure feed in via .getJSON(WCQ_URL)
> >
> > So for ACTIONNUMBER #3, that has the multi-input destination:
> >
> > PROMPT What are your contact email addresses (upto 5 allowed)?
> > DESTINATION EMAILADDRESS(5)
> >
> > which defines 5 fields, if I was going to do this with jQuery, you
> > can then see what I am talking about.
> >
> > This would be wrong, right?
> >
> > function MakeEmailField(n) {
> > var inputBox = $('<input>').attr("type", "text").attr("id",
> > "email");
> > for (i =0; i < n; i++) {
> > inputBox.appendTo('#myForm');
> > }
> > }
> >
> > I would need to move the variable creation inside the loop.
> >
> > function MakeEmailField(n) {
> > for (i =0; i < n; i++) {
> > var inputBox = $('<input>').attr("type", "text").attr("id",
> > "email");
> > inputBox.appendTo('#myForm');
> > }
> > }
> >
> > Conceptually, it makes a big difference, probably has some
> > significance with memory as well. :-)
> >
> > --
> > HLS
> >
> >
>
