DOM的中文意义是 文档对象模型 我们常见的网页，XML等都是DOM结构，都可以用统一的标准的方法去操作。
在网页中，DOM的结构如 dom1.html 所示
现在可用IE8的开发人员工具来显示DOM树

DOM就是一棵树，我们所说的动态生成，其实质就是在这棵树上加添加支干与叶子。
在操作时注意挂接点的选择。
挂接的支干也能删除。
www.phpchengdu.com 罗维

示例如下：

<script type="text/javascript">
//动态生成表单及元素
var form=document.createElement('form');
form.id='form1';
form.method='POST';
form.action='form1.php';
document.body.appendChild(form);

//文本框1
var textBox1=document.createElement('input');
textBox1.type='text';
textBox1.id='name';
textBox1.name='name';
textBox1.value='mike上课没有认真听讲';
textBox1.fight="我要收拾这些上课不认真听讲的人-mike";
form.appendChild(textBox1);//注意，这里是form.appendChild
//换行
var br=document.createElement('br');
form.appendChild(br);

//文本框1 更加标准的写法
var textBox2=document.createElement('input');
textBox2.setAttribute('type','text');
textBox2.setAttribute('id','name1');
textBox2.setAttribute('name','name');
textBox2.setAttribute('value','tom上课没有认真听讲');
textBox2.setAttribute('fight','我要收拾这些上课不认真听讲的人-tom');
form.appendChild(textBox2);//注意，这里是form.appendChild

//取动态生成的文本框的值 方法一：通过name属性
var objs=document.getElementsByName("name");
alert(objs[0].value);
alert(objs[1].value);
//更标准的写法
alert(objs[0].getAttribute('value'));
alert(objs[1].getAttribute('value'));

//换行
var br=document.createElement('br');
form.appendChild(br);
//文本框2
var textBox2=document.createElement('input');
textBox2.type='text';
textBox2.id='age';
textBox2.name='age';
textBox2.value='please input your age';
form.appendChild(textBox2);
//换行
var br=document.createElement('br');
form.appendChild(br);

//单选框
var radioBox1=document.createElement('input');
radioBox1.type='radio';
radioBox1.id='sexBoy';
radioBox1.name='sex';
radioBox1.value='boy';
form.appendChild(radioBox1);//注意，这里是form.appendChild
var text=document.createTextNode('男');
form.appendChild(text);

//单选框
var radioBox2=document.createElement('input');
radioBox2.type='radio';
radioBox2.id='sexGirl';
radioBox2.name='sex';
radioBox2.value='girl';
form.appendChild(radioBox2);//注意，这里是form.appendChild
var text=document.createTextNode('女');
form.appendChild(text);

//ie6下上述方法有一个小的bug，请注意,可用以下方法实现，但下述方法在firefox下不兼容
if(navigator.userAgent.indexOf("MSIE")>0){
 var text="<input type='radio' name='sex1' id='sex1' value='1' />";
 var radio=document.createElement(text);
 form.appendChild(radio);
 var text=document.createTextNode('男');
 form.appendChild(text);
 var text="<input type='radio' name='sex1' id='sex2' value='2' />";
 var radio1=document.createElement(text);
 form.appendChild(radio1);
 var text=document.createTextNode('女');
 form.appendChild(text);
}
//换行
var br=document.createElement('br');
form.appendChild(br)
//复选框
var checkbox1=document.createElement('input');
checkbox1.type='checkbox';
checkbox1.id='checkbox1';
checkbox1.name='checkbox1';
checkbox1.value='排球';
form.appendChild(checkbox1);//注意，这里是form.appendChild
var text=document.createTextNode('排球');
form.appendChild(text);

var checkbox2=document.createElement('input');
checkbox2.type='checkbox';
checkbox2.id='checkbox2';
checkbox2.name='checkbox2';
checkbox2.value='足球';
form.appendChild(checkbox2);//注意，这里是form.appendChild
var text=document.createTextNode('足球');
form.appendChild(text);

var checkbox3=document.createElement('input');
checkbox3.type='checkbox';
checkbox3.id='checkbox3';
checkbox3.name='checkbox3';
checkbox3.value='泡mm';
form.appendChild(checkbox3);//注意，这里是form.appendChild
var text=document.createTextNode('泡mm');
form.appendChild(text);

//换行
var br=document.createElement('br');
form.appendChild(br)
//下拉框1
var select1=document.createElement('select');
select1.id='select1';
select1.name='select1';
form.appendChild(select1);
for(var i=0;i<5;i++){
 var option=document.createElement('option');
 select1.appendChild(option);
 option.value=i;
 var optionText=document.createTextNode('选择项'+i);
 option.appendChild(optionText);
}
//换行
var br=document.createElement('br');
form.appendChild(br)
//下拉框2
var select2=document.createElement('select');
select2.id='select2';
select2.name='select2';
form.appendChild(select2);