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 EasyUI API 中文文档 - PropertyGrid属性表格
Nov 18 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
精通JavaScript的this关键字
May 28 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 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 mysql数据库操作分页类
2008/06/04 PHP
php两种无限分类方法实例
2015/04/21 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
JavaScript执行顺序详细介绍
2013/12/04 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
python 判断自定义对象类型
2009/03/21 Python
Python实现调度算法代码详解
2017/12/01 Python
详解如何设置Python环境变量?
2019/05/13 Python
python实现超级玛丽游戏
2020/03/18 Python
python使用列表的最佳方案
2020/08/12 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
最新会计专业求职信范文
2014/01/28 职场文书
王老吉广告词
2014/03/20 职场文书
销售类求职信
2014/06/13 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
MySQL数据库简介与基本操作
2022/05/30 MySQL
mysqldump进行数据备份详解
2022/07/15 MySQL