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 相关文章推荐
图片自动缩小 点击放大
Jul 07 Javascript
js select常用操作控制代码
Mar 16 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
JS实现商品筛选功能
Aug 19 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
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
弹出模态框modal的实现方法及实例
2017/09/19 PHP
表单内同名元素的控制
2006/11/22 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
javascript时区函数介绍
2012/09/14 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
讲解Python中的标识运算符
2015/05/14 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
Python编写一个闹钟功能
2017/07/11 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
python 杀死自身进程的实现方法
2019/07/01 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
python 高阶函数简单介绍
2021/02/19 Python
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
十八届三中全会感言
2014/03/10 职场文书
排查整治工作方案
2014/06/09 职场文书
村主任当选感言
2015/08/01 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android
vue 自定义组件添加原生事件
2022/04/21 Vue.js
Nginx配置使用详解
2022/07/07 Servers