如何使用js动态生成html代码

html-css010

如何使用js动态生成html代码,第1张

所谓动态生成html代码就是源文件代码中原来没有内容或者需要重新改变此处的要显示的文字或内容,需要用JavaScript代码来实现。动态生成是一种很常见常用的方法。

用innerHTML写入html代码:

<div id="zd"></div>

‘即为向id为zd的标签写入内容

<script>document.getElementById("zd").innerHTML="这里即为要写入的代码"</script>

说明:

innerHTML:向对象插入内容。

获得JS生成后的HTML代码,首先需要要获取的是那一段代码,然后在通过innerHTML这个JS的方法来调用,然后在输出这段方法就行了;

代码:

<html>

<head></head>

<script>

var oDiv = document.getElementById('div1')

alert(oDiv.innerHTML)

</script>

<body>

<div id='div1'>

<p>会被获取的</p>

</div>

/body>

</html>

这样就能获取到JS生成后的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>")

运行结果: