adding elements to the DOM

[rob :: digitalburn]

Hi all,

I'm pretty sure this can be done, but I'm not sure. I'm trying to figure out
how an element can be added to the document on the fly (due to user input),
using JavaScript. For example, adding an addition input field to a form if
the user wants one (I'm familiar with setting up the field once it's
actually there).

If anyone's curious, it's for a CMS system. Any help would be very much
appreciated.

Thanks
Rob

[rob :: digitalburn]

Hum, I found an IE specific way to do it easily (insertAdjacentHTML), but
I'd rather find a DOM compatible technique.

I did find the DOM way to create an element (createElement), but no way to
insert it into the document tree.

[danilocelic]

rob :: digitalburn wrote:

> Hi all,
>
> I'm pretty sure this can be done, but I'm not sure. I'm trying to figure out
> how an element can be added to the document on the fly (due to user input),
> using JavaScript. For example, adding an addition input field to a form if
> the user wants one (I'm familiar with setting up the field once it's
> actually there).
>
> If anyone's curious, it's for a CMS system. Any help would be very much
> appreciated.

you could try to append to the innerHTML of the form tag.

place in the head of your document:

<script>
function addFormField(f){
f.innerHTML += '<input type="text" name="newTextField" value="type here">';
}
</script>

then put this button on your page:

<input type="button" value="Add Field" onclick="addFormField(this.form)">


this will add to the end of your form. Of course you may not want it at
the end, but in a particular place, if so, then you could add a div
inside your form and append to it's innerHTML.


--
Enjoy,
Danilo Celic

| Extending Knowledge, Daily
| [url]http://www.CommunityMX.com/[/url]

Those who aren't looking often have their eyes open widest.

[rob :: digitalburn]

Thanks. If I was going to do this, I might as well use the system I outlined
above though, as it's more robust I think. What I'm really looking for is
something DOM compatible - as far as I know, the innerHTML property is IE
only.

Thanks again.


"danilocelic" <danilo@shimmerphase.com> wrote in message
news:bn8s44$kd2$1@forums.macromedia.com...

> rob :: digitalburn wrote:
>

> > Hi all,
> >
> > I'm pretty sure this can be done, but I'm not sure. I'm trying to figure

out

> > how an element can be added to the document on the fly (due to user

input),

> > using JavaScript. For example, adding an addition input field to a form

if

> > the user wants one (I'm familiar with setting up the field once it's
> > actually there).
> >
> > If anyone's curious, it's for a CMS system. Any help would be very much
> > appreciated.

>
> you could try to append to the innerHTML of the form tag.
>
> place in the head of your document:
>
> <script>
> function addFormField(f){
> f.innerHTML += '<input type="text" name="newTextField" value="type

here">';

> }
> </script>
>
> then put this button on your page:
>
> <input type="button" value="Add Field" onclick="addFormField(this.form)">
>
>
> this will add to the end of your form. Of course you may not want it at
> the end, but in a particular place, if so, then you could add a div
> inside your form and append to it's innerHTML.
>
>
> --
> Enjoy,
> Danilo Celic
>
> | Extending Knowledge, Daily
> | [url]http://www.CommunityMX.com/[/url]
>
> Those who aren't looking often have their eyes open widest.
>

[danilocelic]

rob :: digitalburn wrote:

> Thanks. If I was going to do this, I might as well use the system I outlined
> above though, as it's more robust I think. What I'm really looking for is
> something DOM compatible - as far as I know, the innerHTML property is IE
> only.

The method I showed works in NN7.1 and IE6. Didn't test in other browsers.

--
Enjoy,
Danilo Celic

| Extending Knowledge, Daily
| [url]http://www.CommunityMX.com/[/url]

Those who aren't looking often have their eyes open widest.

[rob :: digitalburn]

I'm not too fussed about browser compatibility (as only one person will use
this and he has IE), I've just suddenly got a thing for W3C standards, and
according to the reference that comes with DW, innerHTML ain't in them :) It
doesn't really matter though, thanks for your time :)

> The method I showed works in NN7.1 and IE6. Didn't test in other browsers.
>
> --
> Enjoy,
> Danilo Celic
>
> | Extending Knowledge, Daily
> | [url]http://www.CommunityMX.com/[/url]
>
> Those who aren't looking often have their eyes open widest.
>

[danilocelic]

rob :: digitalburn wrote:

> I'm not too fussed about browser compatibility (as only one person will use
> this and he has IE), I've just suddenly got a thing for W3C standards, and
> according to the reference that comes with DW, innerHTML ain't in them :) It
> doesn't really matter though, thanks for your time :)

You're correct, it's not part of the spec, but modern browsers support
it, and that's enough for me.


Enjoy,
Danilo Celic

| Extending Knowledge, Daily
| [url]http://www.CommunityMX.com/[/url]

Those who aren't looking often have their eyes open widest.

[rob :: digitalburn]

I must admit I usually use it too... I was just set on doing things the
'proper' way this time around :)