1、新建一个html文件,命名为test.html。
2、在test.html文件内,创建一个div模块,并设置其id属性为mydiv,用于下面使用js获得标签对象。
3、在test.html文件内,在div标签内,填写一段文字,并加入一个span标签。
4、在test.html文件内,创建一个button按钮,按钮名称为“获取html”。
5、给button绑定onclick点击事件,当按钮被点击时,执行myfun()函数。
6、在test.html文件内,在js标签内,创建myfun()函数,在函数内,使用getElementById()方法获得div对象,通过innerHMTL属性获得div内的html内容,最后,使用alert方法将获得的html内容以弹窗形式显示
7、在浏览器打开test.html文件,点击按钮,查看获得的html标签内容。
js输出html中表格的方法如下:
document.write("<table border=1 >")
for(i=1i<=ri++)
{
document.write("<tr>")
for(j=1j<=cj++)
document.write("<td>"+Math.pow(j,i)) //输出数组
document.write("</tr>")
}
document.write("</table>")
运行结果:
JS输入输出HTML代码有2种方式:1、在需要输出的的位置写JS代码:<script>document.write('需要输出的内容')</script>
比如:
<ul>
<script>document.write('<li><a href="/wap2/newsPage/1320">5</a></li><li><a href="/wap2/newsPage/1319">4</a></li><li><a href="/wap2/newsPage/1318">3</a></li><li><a href="/wap2/newsPage/1317">2</a></li><li><a href="/wap2/newsPage/1316">1</a></li>')
</script>
</ul>
2、采用js的innerHTML方法:
例子
<ul id="ul"></ul>
<script>
document.getElementById("ul").innerHTML='<li><a href="/wap2/newsPage/1320">5</a></li><li><a href="/wap2/newsPage/1319">4</a></li><li><a href="/wap2/newsPage/1318">3</a></li><li><a href="/wap2/newsPage/1317">2</a></li><li><a href="/wap2/newsPage/1316">1</a></li>'
</script>