JS简单实现动态添加HTML标记的方法示例
2018-04-08 11:39
1066 查看
一 介绍
动态添加一个HTML标记可以使用
createElement()方法来实现。
CreateElement()方法可以根据一个指定的类型来创建一个HTML标记。
语法:
sElement=document.createElement(sName)
sElement:用来接收该方法返回的一个对象。
sName:用来设置HTML标记的类型和基本属性。
二 应用
动态添加一个文本框
本示例通过单击“动态添加文本”按钮,将在页面中动态添加一个文本框。
三 代码
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>www.jb51.net 动态添加HTML标记</title> <script language="javascript"> <!-- function addText() { var txt=document.createElement("input"); txt.type="text"; txt.name="txt"; txt.value="动态添加的文本框"; document.fm1.appendChild(txt); } --> </script> </head> <body> <form name="fm1"> <input type="button" name="btn1" value="动态添加文本框" onclick="addText();" /> </form> </body> </html>
四 运行结果
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JS实现动态给标签控件添加事件的方法示例
- JS实现动态添加DOM节点和事件的方法示例
- jQuery简单实现向列表动态添加新元素的方法示例
- 多种方法实现JS动态添加事件
- JS动态添加Table的TR,TD实现方法
- asp.net后台动态添加JS文件和css文件的引用实现方法
- JS动态给对象添加属性和值的实现方法
- 原生JS简单实现ajax的方法示例
- jQuery实现html表格动态添加新行的方法
- js 动态给元素添加、移除事件的实现方法
- 动态添加HTML标记中下拉列表框的处理方法
- Javascript 创建类并动态添加属性及方法的简单实现
- 详解js的事件处理函数和动态创建html标记方法
- js简单实现表单中点击按钮动态增加输入框数量的方法
- js实现html节点、CSS样式、事件的动态添加以及html覆盖层的添加
- JS实现向表格中动态添加行的方法
- js实现对table动态添加、删除和更新的方法
- jQuery实现html表格动态添加新行的方法