javascript---使用createElement动态创建HTML对象.窗体传值

 

代码

1 .创建链接

< BODY >
< script language = " JavaScript " >
var o  =  document.body;
// 创建链接
function createA(url,text)
{
    var a  =  document.createElement( " a " );
    a.href  =  url;
    a.innerHTML  =  text;
    a.style.color  =   " red " ;
    o.appendChild(a);
}
createA( " http://www.hao123.com/%22,%22hao " );
</ script >
</ BODY >

           
      2 .创建DIV

< body >
< script language = " javascript " >
var o  =  document.body;
// 创建DIV
function createDIV(text)
{
    var div  =  document.createElement( " div " );
    div.innerHTML  =  text;
    div.style.background  =   " red " ;
    o.appendChild(div);
}
createDIV( " div " ); 
</ script >
</ body >
                
            3 .创建表单项
< BODY >
< script language = " javascript " >
var o  =  document.body;
// 创建表单项
function createInput(sType,sValue)
{
    var input  =  document.createElement( " input " );
    input.type  =  sType;
    input.value  =  sValue;
    o.appendChild(input);
}
createInput( " button " , " aa " );
</ script >
</ BODY >
                4 .创建表格
< BODY >
< script language = " javascript " >
var o  =  document.body;
// 创建表格
function createTable(w,h,r,c)
{
    var table  =  document.createElement( " table " );
    var tbody  =  document.createElement( " tbody " );
    table.width  =  w;
    table.height  =  h;
    table.border  =   1 ; 
     for (var i = 1 ;i <= r;i ++ )
    {
        var tr  =  document.createElement( " tr " );
         for (var j = 1 ;j <= c;j ++ )
        {
            var td  =  document.createElement( " td " );
            td.innerHTML  =  i  +   ""   +  j;
             // td.appendChild(document.createTextNode(i + "" + j));
            td.style.color  =   " #FF0000 " ;
            tr.appendChild(td);
        }
        tbody.appendChild(tr); 
    }
    table.appendChild(tbody);
    o.appendChild(table);
}
createTable( 270 , 270 , 9 , 9 );
</ script >
</ BODY >

      4 .创建按钮,文本框 并窗体传值(HTMLPage1.htm)
    < script type = " text/javascript " >
        
        var index  =   2 ;
        function addEle() {
           
            var txt  =  document.createElement( " input " );
            txt.setAttribute( " type " ,  " input " );
            txt.setAttribute( " id " ,  " txt "   +  index);
            var btn  =  document.createElement( " input " );
            btn.setAttribute( " type " ,  " ` " );
            btn.setAttribute( " id " ,  " btn "   +  index);
            btn.setAttribute( " value " ,  " 取值 " );
            btn.setAttribute( " onclick " ,  " openWindow() " );
            var br  =  document.createElement( " br " );
            document.getElementById( " content " ).appendChild(txt);
            document.getElementById( " content " ).appendChild(btn);
            document.getElementById( " content " ).appendChild(br);
            index ++ ;
        }

        function openWindow() {
            var returnVal  =  window.showModalDialog( " HTMLPage2.htm " ,  "" ,  "" );
            var srcID  =  window. event .srcElement.id; // 触发事件的对象.
            var ind  =  srcID.substr( 3 ,srcID.length);
             for  (var i  in  returnVal) { 
                document.getElementById( " txt "   +  ind).value  +=  returnVal[i] + "   " ;
            }
        }

     </ script >
                       HTMLPage2.htm
      < script type = " text/javascript " >
    
        function sub() {
            var arr  =  document.getElementsByTagName( " input " );   
            var val  =   new  Array();
             for  (var i  in  arr) {
                 if  (arr[i].type  ==   " checkbox " ) {
                     if  (arr[i]. checked ) {
                        val[val.length]  =  arr[i].value;
                    }
                }
            }
            window.returnValue  =  val;
            window.close();
        }
     </ script >