How do you dynamically add a HTML element to a web page? In this example, I'll show how to add more text fields.
This also let you dynamically change an existing element.

Press the button to generate more text fields

Now when you click on "Add another field ", it shows the new text field properly.

This is the result I wanted to achieve, and it wasn't difficult at all. There are tons of information on the web, some are out of date and some are contradictory. So it's hard to really make an accurate judgement. It turns out, unlike what the book (from 2001) had to say about using parents and nodes and children in order to replace or add new content. I didn't have to use the parent of the element I was trying to
modify, I just had to use the element itself and add a child (subelement) to it. This is the source code

There should be an HTML element with the name "hp", and it seems that it's safer to use "id" instead of "name" for Internet Explore. Opear and Firefox both work with "id" and "name" without problems. However IE supports "id" but not name. Example we used: <P id="hp">

function moreInput()
{

var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);

if (browser == "Netscape")
{ var ftarget = document.getElementById("hp"); }
else
{ var ftarget = document.getElementsByName("hp")[0]; }

/* there is a difference in the quantity of the noun in these two functions:

getElementById()
getElementsByName() or getElementsByTagName()

One is singular, the other is plural. Firefox and Netscape support only getElementById()
However, Opera and Internet Explorer seems to work with both getElementById() and getElementsByName()
However, note that the first returns a single object, while the latter returns an array.


Whereas you have to use getElementById("elementname")
to use getElementsByName("elementname")[i] where i is the index of the array, if it's a single element, then it's 0.
*/

var newfield = "<input type=\"text\" size=60 name=\"network_name\">";

// var newNode = document.createTextNode(newfield);
//if you create a text node, the tags won't be parsed, if you create an element, then things like INPUT box will show up properly. Otherwise it will only show as text

var p = document.createElement("P");
p.innerHTML = newfield;

ftarget.appendChild(p);

}

In the past, I tried to follow the Document Object Model strictly and use parents, nodes and children;
for example, I tried to use ftarget.parentNode and always got undefined on Opera and IE. However, as you
can see, I didn't need to figure out who is the parent of ftarget, because all I cared about is to replace the
content between the tags of ftarget.

For example, in the HTML,

<P id="pet">Cat</P>

All I care is to replace the Cat with Puppy. So in the above javascript code, you declare what the new replacement value will be and set it to the innerHTML.
var newfield = "Puppy";
ftarget.innerHTML = newfield;

It was that simple. I originally thought it was supposed to be simple. However, the tricky part is try to understand
and find how to create or replace an element at exactly the position I wanted, instead of anywhere as in using document.write()

Another thing to note, by using <NOSCRIPT> tag, you can still give the same functionality to browsers whose
Javascript is disabled.