求助高手如何用createElement addpendChlid的方式生成以下代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<DIV style="left:143px;top:39px;width:746px;height:945;position: relative;">
<TABLE height=300 cellPadding=10 width=500 align=center background=http://bbs.guolan.com/upload/2004813181838.gif border=3 table="0"><TD>
<DIV align=center><FONT face=楷体_GB2312 color=#c709f7 size=4>第一行</FONT></DIV><DIV align=center><FONT face=楷体_GB2312 color=#1ae66b size=4>第二行</FONT></DIV>
</TD></TABLE></DIV>
</body>
</html>
想按这种方式动态的生成一张文字居中的图片
总体思路就是通过createElement addpendChlid的方法在<div>下生成<table>；再在<table>下生成一个<td>；然后在<td>下生成一个<tr>；接着在<tr>下生成一个<div>最后在<div>下生成一个<font>。自己试了几次都不成功求助高手

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <head>
    <script>
    window.onload=function(){
    var root = document.getElementById("div");
    var table = document.createElement("table");
    table.setAttribute("height",300)
    table.setAttribute("cellPadding",10)
    table.setAttribute("width",300)
    table.setAttribute("align","center");
    table.setAttribute("background","http://bbs.guolan.com/upload/2004813181838.gif");
    table.setAttribute("border",3);
    table.setAttribute("table",0); var td = document.createElement("td");
    var div = document.createElement("div");
    div.setAttribute("align","center"); var font = document.createElement("font");
    font.setAttribute("face","楷体_GB2312");
    font.setAttribute("color","#c709f7");
    font.setAttribute("size",4); font.createTextNode("第一行");
    div.appendChild(font); font.setAttribute("color","#1ae66b");
    font.createTextNode("第二行"); div.appendChild(font);
    td.appendChild(div);
    table.appendChild(td);
    root.appendChild(table);
    alert(root.innerHTML);
    }
    </script>
    </head>
    <body> <DIV id="div" style="left:143px;top:39px;width:746px;height:945;position: relative;">
    <TABLE height=300 cellPadding=10 width=500 align=center background=http://bbs.guolan.com/upload/2004813181838.gif border=3 table="0"> <TD>
    <DIV align=center><FONT face=楷体_GB2312 color=#c709f7 size=4>第一行</FONT></DIV> <DIV align=center><FONT face=楷体_GB2312 color=#1ae66b size=4>第二行</FONT></DIV>
    </TD>
    </TABLE> </DIV> </body></HTML>
      

  2.   

    十分感谢一楼朋友的回答，但是如果去掉你body部分的能容你的script好像没什么作用啊。请问你有试过吗？
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function init(){
    var html = [];
    html.push('<TABLE height=300 cellPadding=10 width=500 align=center background=http://bbs.guolan.com/upload/2004813181838.gif border=3 table="0">');
    html.push('<TD><DIV align=center><FONT face=楷体_GB2312 color=#c709f7 size=4>第一行</FONT></DIV>');
    html.push('<DIV align=center><FONT face=楷体_GB2312 color=#1ae66b size=4>第二行</FONT></DIV></TD></TABLE>'); document.getElementById('div1').innerHTML = html.join('');
    }
    //-->
    </SCRIPT>
    </head><body onload='init()'>
    <DIV id="div1" style="left:143px;top:39px;width:746px;height:945;position: relative;">
    </DIV>
    </body>
    </html>