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 相关文章推荐
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 Javascript
uniapp开发打包多端应用完整方法指南
Dec 24 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新手上路(五)
2006/10/09 PHP
一个简单的PHP&amp;MYSQL留言板源码
2020/07/19 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
python使用htmllib分析网页内容的方法
2015/05/08 Python
pytorch之Resize()函数具体使用详解
2020/02/27 Python
python如何删除列为空的行
2020/07/17 Python
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
人民调解协议书范本
2014/10/11 职场文书
老公保证书怎么写
2015/02/26 职场文书
八月迷情观后感
2015/06/11 职场文书
银行工作心得体会范文
2016/01/23 职场文书