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
>
>
