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 相关文章推荐
用JQuery 实现的自定义对话框
Mar 24 Javascript
Javascript的闭包
Dec 31 Javascript
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
Dec 02 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 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实现的进度条效果详解
2016/05/03 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
详解Python下ftp上传文件linux服务器
2018/06/21 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
行政助理求职自荐信
2013/10/26 职场文书
历史学专业推荐信
2013/11/06 职场文书
人力资源管理专业学生自我评价
2013/11/20 职场文书
班组长安全职责
2014/01/05 职场文书
租房协议书样本
2014/08/20 职场文书
入股合作协议书
2014/10/12 职场文书
债务授权委托书范本
2014/10/17 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书