详细的解题步骤如下：
<div id="parent"></div>
function addElementDiv(obj) {
var parent = document.getElementById(obj)
//添加 div
var div = document.createElement("div")
//设置 div 属性，如 id
div.setAttribute("id", "newDiv")
div.innerHTML = "js 动态添加div"
parent.appendChild(div)
}
调用：addElementDiv("parent")
什么是DIV元素：
1、DIV标签，称为区隔标记。作用是设定字、画、表格等的摆放位置。当你把文字、图象，或其他的放在 DIV 中，它可称作为"DIV block"，或"DIV element"或"CSS-layer"，或干脆叫"layer"。而中文我们把它称作"层次"。
2、DIV元素，是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
JS 语法向body中添加元素用innerHTML，下面是示例代码，供参考：<script>
var div1 = document.getElementById('DIV1')
var code = '<TABLE>'
code += '<TR><TH>姓名</TH><TH>性别</TH></TR>'
code += '<TR><TD>张三</TD><TD>男</TD></TR>'
code += '<TR><TD>李三</TD><TD>女</TD></TR>'
code += '<TR><TD>王三</TD><TD>男</TD></TR>'
code += '<TR><TD>赵三</TD><TD>男</TD></TR>'
div1.innerHTML = code + '</TABLE>'
</script>
<body>
<div id='div1'></div>
</body>
但通常来说，开发者习惯动态的去添加行而非动态生成表格，因为表头基本都是固定的，每次都刷影响效率，故代码如下：
<script>
var div1 = document.getElementById('tb1')
var code = ''
code += '<TR><TD>张三</TD><TD>男</TD></TR>'
code += '<TR><TD>李三</TD><TD>女</TD></TR>'
code += '<TR><TD>王三</TD><TD>男</TD></TR>'
code += '<TR><TD>赵三</TD><TD>男</TD></TR>'
div1.innerHTML = code
</script>
<body>
<div>
<table>
<THEAD><TR><TH>姓名</TH><TH>性别</TH></TR></THEAD>
<TBODY id='tb1'></TBODY>
</table>
</div>
</body>
这是IE兼容性的问题，换一种写法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<title>图片轮播</title>
</head>
<body>
<TABLE cellSpacing=0 cellPadding=0 width=750 align=center border=0>
<TBODY>
<TR>
<TD><style type="text/css">
<!--
#demo {
overflow:hidden
border: 0px dashed #CCC
width: 970px
height: 155px
}
#demo img {
border: 3px solid #F2F2F2
}
#indemo {
float: left
width: 800%
}
#demo1 {
float: left
}
#demo2 {
float: left
}
-->
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<table width="180" border="0" cellspacing="2" cellpadding="0">
<tr>
<td><table width=880 border="0" cellpadding="0" cellspacing="3">
<tr>
<td align="left"><table border="0" cellpadding="0" cellspacing="2" style="border:1px solid #B5B5B5" onMouseOver="this.style.border='1px solid #ebd1aa'" onMouseOut="this.style.border='1px solid #B5B5B5'">
<tr>
<td width="160" height="120" align="center" valign="middle">1</td>
</tr>
</table></td>
<td align="left"><table border="0" cellpadding="0" cellspacing="2" style="border:1px solid #B5B5B5" onMouseOver="this.style.border='1px solid #ebd1aa'" onMouseOut="this.style.border='1px solid #B5B5B5'">
<tr>
<td width="160" height="120" align="center" valign="middle">2</td>
</tr>
</table></td>
<td align="left"><table border="0" cellpadding="0" cellspacing="2" style="border:1px solid #B5B5B5" onMouseOver="this.style.border='1px solid #ebd1aa'" onMouseOut="this.style.border='1px solid #B5B5B5'">
<tr>
<td width="160" height="120" align="center" valign="middle">3</td>
</tr>
</table></td>
<td align="left"><table border="0" cellpadding="0" cellspacing="2" style="border:1px solid #B5B5B5" onMouseOver="this.style.border='1px solid #ebd1aa'" onMouseOut="this.style.border='1px solid #B5B5B5'">
<tr>
<td width="160" height="120" align="center" valign="middle">4</td>
</tr>
</table></td>
<td align="left"><table border="0" cellpadding="0" cellspacing="2" style="border:1px solid #B5B5B5" onMouseOver="this.style.border='1px solid #ebd1aa'" onMouseOut="this.style.border='1px solid #B5B5B5'">
<tr>
<td width="160" height="120" align="center" valign="middle">5</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10//数字越大速度越慢
var tab=document.getElementById("demo")
var tab1=document.getElementById("demo1")
var tab2=document.getElementById("demo2")
tab2.innerHTML=tab1.innerHTML
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
tab.onmouseover=function()
tab.onmouseout=function()
-->
</script>
</TD></TR></TBODY></TABLE></TD></TR></TABLE>
</BODY></HTML>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）