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 相关文章推荐
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
js禁止小键盘输入数字功能代码
Aug 01 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
vue.js实现请求数据的方法示例
Feb 07 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
微信小程序获取当前位置和城市名
Nov 13 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 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大量数据的时候内存占用分析
2011/07/22 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
python中的decimal类型转换实例详解
2019/06/26 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
Python绘图实现台风路径可视化代码实例
2020/10/23 Python
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
J2EE面试题大全
2016/08/06 面试题
财务管理专业应届毕业生求职信
2013/09/22 职场文书
大学生入党思想汇报
2014/01/01 职场文书
爱心捐书活动总结
2014/07/05 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
办公用品质量保证书
2015/05/11 职场文书
运动员加油词
2015/07/18 职场文书
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL