JS简单实现动态添加HTML标记的方法示例


Posted in Javascript onApril 08, 2018

本文实例讲述了JS简单实现动态添加HTML标记的方法。分享给大家供大家参考,具体如下:

一 介绍

动态添加一个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>3water.com 动态添加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>

四 运行结果

JS简单实现动态添加HTML标记的方法示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
js自定义QQ菜单效果
Jan 10 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 Javascript
React Router v4 入坑指南(小结)
Apr 08 #Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 #Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 #Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 #Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 #Javascript
JS求Number类型数组中最大元素方法
Apr 08 #Javascript
angular2模块和共享模块详解
Apr 08 #Javascript
You might like
php学习之数据类型之间的转换代码
2011/05/29 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
js的一些常用方法小结
2011/06/29 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
Vue指令指令大全
2019/02/09 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
vue实现匀速轮播效果
2020/06/29 Javascript
Python拼接字符串的7种方法总结
2018/11/01 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
django将数组传递给前台模板的方法
2019/08/06 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
网络信息安全承诺书
2014/03/26 职场文书
房屋租赁协议书
2014/04/10 职场文书
工作说明书范文
2014/05/07 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
英文导游词
2015/02/13 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
学习雷锋主题班会
2015/08/14 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle