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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
js+css实现红包雨效果
Jul 12 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
解决Vue watch里调用方法的坑
Nov 07 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
一个简单的MySQL数据浏览器
2006/10/09 PHP
PHP时间戳使用实例代码
2008/06/07 PHP
php minixml详解
2008/07/19 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
JS原型链怎么理解
2016/06/27 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
javascript+css3开发打气球小游戏完整代码
2017/11/28 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
python线程池的实现实例
2013/11/18 Python
PHP统计代码行数的小代码
2019/09/19 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
python实现飞行棋游戏
2020/02/05 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
国外平面设计第一市场:99designs
2016/10/25 全球购物
土木工程师职业规划范文
2014/03/07 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
运动会拉拉队口号
2014/06/09 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
银行服务理念口号
2015/12/25 职场文书
小学数学新课改心得体会
2016/01/22 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL