用JS来create结点，纯JS代码生成html页面(作业练习)

<script>
    window.onload = function(){
    document.title = '表单示例';
    var body = document.body;
    // body append child begin
    var center = document.createElement('center'); 
    body.appendChild(center);

    var h1 = document.createElement('h1');
    h1.innerHTML = '增加用户';
    center.appendChild(h1);

    var hr = document.createElement('hr');
    center.appendChild(hr);

    var form = document.createElement('form');
    form.action = 'test.jsp';
    form.method = 'post';
    center.appendChild(form);
    // body append child end
        //form append child    begin
    var input1 = document.createElement('input');
    input1.type = 'hidden';
    input1.name = 'id';
    input1.id = '1';
    form.appendChild(input1);

    var table = document.createElement('table');
    table.width = '300';
    form.appendChild(table);
        //form append child end
            //table append child begin
                // tr1 begin
    var tr = document.createElement('tr');
    table.appendChild(tr);

    var td = document.createElement('td');
    td.innerHTML = '账号：';
    tr.appendChild(td);

    var td = document.createElement('td');
    var input = document.createElement('input');
    input.type = 'text';
    input.name = 'uname';
    td.appendChild(input);
    tr.appendChild(td);
                //tr1 end
                //tr2 begin
    var tr = document.createElement('tr');
    table.appendChild(tr);

    var td = document.createElement('td');
    td.innerHTML = '密码：';
    tr.appendChild(td);

    var td = document.createElement('td');
    var input = document.createElement('input');
    input.type = 'password';
    input.name = 'passwd';
    td.appendChild(input);
    tr.appendChild(td);
                //tr2 end
                //tr3 begin
    var tr = document.createElement('tr');
    table.appendChild(tr);

    var td = document.createElement('td');
    td.innerHTML = '性别：';
    tr.appendChild(td);

    var td = document.createElement('td');
                    //radio 男 begin
    var input = document.createElement('input');
    input.type = 'radio';
    input.name = 'sex';
    input.value = '1';
    input.id = 'r1';
    td.appendChild(input);
    var label = document.createElement('label');
    label.setAttribute('for','1');
    label.innerHTML = '男';
    td.appendChild(label);
                    //radio 男 end
                    //radio 女 begin
    var input = document.createElement('input');
    input.type = 'radio';
    input.name = 'sex';
    input.value = '2';
    input.id = 'r2';
    input.checked = 'check';
    td.appendChild(input);
    var label = document.createElement('label');
    label.setAttribute('for','2');
    label.innerHTML = '女';
    td.appendChild(label);
                    //radio 女 end
    tr.appendChild(td);
                //tr3 end
                //tr4 begin
    var tr = document.createElement('tr');
    table.appendChild(tr);

    var td = document.createElement('td');
    td.innerHTML = '爱好：';
    tr.appendChild(td);

    var td = document.createElement('td');
                    //checkbox 游戏 begin
    var input = document.createElement('input');
    input.type = 'checkbox';
    input.name = 'hobby';
    input.value = '1';
    td.appendChild(input);
    var text = document.createTextNode('游戏');
    td.appendChild(text);
                    //checkbox 游戏 end
                    //checkbox 电影 begin
    var input = document.createElement('input');
    input.type = 'checkbox';
    input.name = 'hobby';
    input.value = '2';
    input.checked = 'check';
    td.appendChild(input);
    var text = document.createTextNode('电影');
    td.appendChild(text);
                    //checkbox 电影 end
                    //checkbox 音乐 beign
    var input = document.createElement('input');
    input.type = 'checkbox';
    input.name = 'hobby';
    input.value = '3';
    input.checked = 'check';
    td.appendChild(input);
    var text = document.createTextNode('音乐');
    td.appendChild(text);
                    //checkbox 音乐 end
                    //checkbox 运动 begin
    var input = document.createElement('input');
    input.type = 'checkbox';
    input.name = 'hobby';
    input.value = '4';
    td.appendChild(input);
    var text = document.createTextNode('运动');
    td.appendChild(text);
                    //checkbox 电影 end
    tr.appendChild(td);
                //tr4 end
                //tr5 begin
    var tr = document.createElement('tr');
    table.appendChild(tr);

    var td = document.createElement('td');
    td.innerHTML = '年级：';
    tr.appendChild(td);

    var td = document.createElement('td');
    var sel = document.createElement('select');
    sel.name = 'grade';
    td.appendChild(sel);
    var opt1 = new Option('一年级',1);
    var opt2 = new Option('二年级',2);
    var opt3 = new Option('三年级',3);
    opt3.setAttribute('selected',true);
    var opt4 = new Option('四年级',4);
    sel.appendChild(opt1);
    sel.appendChild(opt2);
    sel.appendChild(opt3);
    sel.appendChild(opt4);
    tr.appendChild(td);
                //tr5 end
                //tr6 begin
    var tr = document.createElement('tr');
    table.appendChild(tr);

    var td = document.createElement('td');
    td.innerHTML = '相片：';
    tr.appendChild(td);

    var td = document.createElement('td');
    var input = document.createElement('input');
    input.type = 'file';
    input.name = 'picture';
    td.appendChild(input);
    tr.appendChild(td);
                //tr6 end
                //tr7 begin
    var tr = document.createElement('tr');
    table.appendChild(tr);

    var td = document.createElement('td');
    td.innerHTML = '备注：';
    tr.appendChild(td);

    var td = document.createElement('td');
    var textarea = document.createElement('textarea');
    textarea.name = 'note';
    textarea.cols = 30;
    textarea.rows = 5;
    textarea.innerHTML = '中国';
    td.appendChild(textarea);
    tr.appendChild(td);
                //tr7 end
                //tr8 begin
    var tr = document.createElement('tr');
    tr.align = 'center';
    table.appendChild(tr);

    var td = document.createElement('td');
    td.setAttribute('colspan','2');
    var input = document.createElement('input');
    input.type = 'submit';
    input.value = '提交';
    td.appendChild(input);
    var input = document.createElement('input');
    input.type = 'reset';
    input.value = '重置';
    td.appendChild(input);
    var input = document.createElement('input');
    input.type = 'button';
    input.value = '按钮';
    input.onclick = 'alert(1)';
    td.appendChild(input);
    var button = document.createElement('button');
    button.innerHTML = '增加';
    var img = document.createElement('img');
    img.src = 'open.png';
    button.appendChild(img);
    td.appendChild(button);
    tr.appendChild(td);
                //tr8 end
            //table append child end
}
</script>