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

ares0991 2011-05-23 07:10:15

<!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>。自己试了几次都不成功求助高手

...全文

130 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

猿敲月下码 2011-05-24

打赏
举报

<!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>

ares0991 2011-05-24

打赏
举报

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

Bannings 2011-05-23

打赏
举报



<!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>