JS如何在 Body 区域插入内容

JavaScript010

JS如何在 Body 区域插入内容,第1张

这是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>

想要在页面动态添加元素，首先要确定在哪个元素后面添加元素，然后利用js的appendChild方法在该元素后面追加元素。

1.获取父节点元素varbody=document.getElementsByTagName('body')[0]。

2.然后动态创建a标签vara=document.createElement('a')。

3.把创建好的a标签追加到body下面body.appendChild(a)。

4.在a标签里面添加文本内容a.innerHTML='这是一个链接'。

5.给a标签添加一个链接a.href='https://www.baidu.com/'。

扩展资料：

js一些原生方法

element.appendChild()方法向节点添加最后一个子节点。

element.innerHTML设置或返回元素的内容。

document.getElementsByTagName()返回带有指定标签名的对象集合。

document.getElementById()返回对拥有指定id的第一个对象的引用。

document.createElement()通过指定名称创建一个元素。