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

JavaScript018

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

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

用innerHTML写入html代码：

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

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

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

说明：

innerHTML：向对象插入内容。

步骤

1、新建一网页文件“sample.html",用记事本或其它文本编辑软件（如UltraEdit）打开，输入如图所示的HTML代码。该网页文件包括一个蓝色的字符串，一个按钮和一个文本框。

2、JS代码可插入到”head"标签之间。编写Javascript代码，代码内容如图所示，并将该段代码复制到网页文件”sample.html“中标签”<head>"和“</head>之间，然后查看网页文件的显示内容。

方法一：

//createElement()创建input元素到obj对象中

var obj = document.createElement('input')

//选择要生成地点的前一个元素

var before = document.getElementById('before')

//设置obj元素名，值

obj.name='name'

obj.value='value'

//setAttribute是可以自由定义属性的，不仅id和type，name和value也可以在这定义

obj.setAttribute('id','idname')

obj.setAttribute('type','typename')

//在前一个元素后面添加obj

before.appendChild(obj)

方法二:

document.write("<inpt name='name' value='value' id='idname' type='typename'>")