js动态创建HTML元素代码实例
分类:实例代码
在实际应用中,可能根据需要动态的创建一个html元素。
下面就通过一个简单的代码实例介绍一下如何实现此效果。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <script type="text/javascript"> function CreateButton() { var odiv=document.getElementById("box"); var obt=document.createElement("input"); obt.type="button"; obt.value="查看效果"; odiv.appendChild(obt); } window.onload=function(){ CreateButton(); } </script> </head> <body> <div id="box"></div> </body> </html>
上面的代码实现了我们的要求,非常的简单,更多内容可以参阅相关阅读。
相关阅读:
(1).document.createElement()方法可以参阅document.createElement()一章节。
(2).appendChild()方法可以参阅js appendChild()一章节。