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新闻滚动插件 jquery.roller.js
Jun 27 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
ReactNative列表ListView的用法
Aug 02 Javascript
vue加载完成后的回调函数方法
Sep 07 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 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编码转换
2012/11/05 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
vue超时计算的组件实例代码
2018/07/09 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
JS实现小星星特效
2019/12/24 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
Python实现全角半角转换的方法
2014/08/18 Python
Python构造函数及解构函数介绍
2015/02/26 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
Python 列表理解及使用方法
2017/10/27 Python
numpy.array 操作使用简单总结
2019/11/08 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
python实现IOU计算案例
2020/04/12 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
机械专业个人求职自荐信格式
2013/09/21 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
oracle索引总结
2021/09/25 Oracle
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技