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 UI AutoComplete 自动完成使用小记
Aug 21 Javascript
模拟select的代码
Oct 19 Javascript
node.js中的fs.realpathSync方法使用说明
Dec 16 Javascript
浅谈react+es6+webpack的基础配置
Aug 09 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
elementUI select组件value值注意事项详解
May 29 Javascript
vue递归获取父元素的元素实例
Aug 07 Javascript
JavaScript实现切换多张图片
Jan 27 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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
用Zend Encode编写开发PHP程序
2006/10/09 PHP
一个简单的PHP投票程序源码
2007/03/11 PHP
提高php运行速度的一些小技巧分享
2012/07/03 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
Python模拟三级菜单效果
2017/09/11 Python
python正则表达式及使用正则表达式的例子
2018/01/22 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
如何理解委托
2012/01/06 面试题
青年创业培训欢迎词
2014/01/10 职场文书
八年级物理教学反思
2014/01/19 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
个人授权委托书范本
2014/04/03 职场文书
大学生村官演讲稿
2014/04/25 职场文书
法语专业求职信
2014/07/20 职场文书
标准单位租车协议书
2014/09/23 职场文书
海上钢琴师观后感
2015/06/03 职场文书
element多个表单校验的实现
2021/05/27 Javascript